“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

iframeWhat is?

The IFrame label specification is an inline framework. An inline frame is used to embed another document within the current HTML document. The use effect is as follows:

iframeThe advantages and disadvantages of

Advantages:

  1. iframeThe embedded web page can be displayed intact;
  2. If there are multiple page referencesiframe, then only need to modifyiframeThe content can be implemented to call the changes of each page, convenient and quick;
  3. A web page can be written as a page if the header and version are the same for the sake of uniformityiframeNesting, which can increase code reuse;

Disadvantages:

  1. iframeBlock the Onload event on the main page.
  2. iframeThe connection pool is shared with the main page, and browsers have restrictions on connections to the same domain, so parallel page loading can be affected.
  3. Code complex, can not be indexed by some search engines (some search engines on the framework of the page can not handle correctly, will affect the ranking of search results);
  4. Multi-frame pages will increase the HTTP requests of the server, affect the parallel loading of pages, and increase the load of the server.

Although it has many disadvantages, it is still very common in our daily use.

iframeinteraction

With the domain name underiframeParent-child page communication

1. The parent page calls the child page method

//html
<iframe id="zi" name="zi" src="zi.html" frameborder="0"></iframe>
// js
// Get the child page method
document.getElementById('zi').contentWindow.ziFn();
// Parent page method
function fuFn() {
  console.log("I'm the parent page method");
}
Copy the code

2. The child page calls the parent page method

// js
function ziFn() {
  console.log('I'm a child page method');
}
function func() {
// Get the parent object, window can be omitted
  parent.window.fuFn();
}

Copy the code

Under the cross domainiframeParent-child page communication

Children pass values to their parents

  1. The childiframecode
window.parent.postMessage('msg'.The '*');
Copy the code
  1. The fatheriframecode
window.addEventListener('message'.function(event){
  if(event.data=='msg') {console.log(event); }})Copy the code

The parent passes value to the child

  1. The childiframecode
window.addEventListener('message'.function() {
  if(event.data=='msg') {console.log(event); }});Copy the code
  1. The fatheriframecode
fuFrame.contentWindow.postMessage('msg'.The '*');
Copy the code

Matters needing attention:

  1. The parent window sends a message to the child windowiframethecontentWindowProperty as the call body;
  2. The message sent by the child window to the parent window needs to be usedwindow.parentThe multilayeriframeusewindow.frameElementGet the top-level window can be usedwindow.top;
  3. To ensure that theiframeLoad complete, as iniframeAn error is reported if a method or variable is called before the load is complete. You can useonloadEvent or withdocument.readyState=="complete"To determine whether the load is complete;