Deep understanding of IFRAME

This article is not an IFRAME API documentation explained, so want to understand the IFRAME API classmate please move MDN, I will be in the browser angle with you to explore the IFRAME, therefore, although this article will mention some of the IFRAME in the old browser application, but not to explain. So, if you are interested in an IFrame's application in an old browser, please also search for the relevant information yourself. At the same time, I will explore some of the features in the IFRAME, the rendering patterns in various modern browsers, the application scenarios, and the impact in modern development from the shallow into the deep.

What is an IFRAME

There are three structure features in HTML: tree structure, hierarchy structure, frame structure. An IFRAME is a member of the box structure. Each IFRAME is a separate sandbox with its own window and DOM.

Why do you need to understand it

Although in the daily development, we should try to use less iframe, but in some special scenarios, we also inevitably need to use the IFRAME. Therefore, an in-depth understanding of the IFRAME allows us to use it more rationally.

Rendering and blocking

As mentioned earlier, the IFRAME is a box structure in the HTML three structure, and there are two additional elements in the box structure: frameset and frame , but they are obsolete and are no longer recommended for use.
Each frame structure has a separate HTML document, and the simplest frame structure is the one that does not contain any of the above three frame structures. The diagram is shown below:

The corresponding, complex frame structure is the multi-box structure compound in a page, the diagram is as follows:

The multi-frame structure in the image is very unsuitable for the mobile side, because this structure of the page multi-touch operation is very unfriendly. To this, the basic knowledge of the box structure of the popularity of the end, the following I will be from the Chrome, Firefox, Safari, IE 11 test results to analyze the IFrame in different browser rendering mode and blocking situation, the code is as follows:
We first define the page to be referenced by the IFRAME and write the following code:

Const START =function() {return date.now ()- start;}  while (Limit () <= 1000 * 5) {}

Next, introduce it in the main page:

<src= "./frame-sets.html"></iframe> 

The code is simple enough to block the IFRAME for at least 5 seconds, and then test the blocking situation in Chrome, Firefox, Safari, IE11, respectively:

	Chrome	Firefox	Safari	IE11
Block Main Page Rendering	False	True	True	True
Block Main Page onload	True	True	True	True

As a result, blocking onload has no objection, it's always been the case, but it's surprising to find that Chrome doesn't block the rendering of the main page, and I guess Chrome creates a separate sandbox process for the IFRAME.

Non-blocking loading IFRAME

In front of the IFRAME and blocking, in different browsers behave roughly the same (only Chrome will not block the main page rendering, OnLoad will be blocked). In most cases, the IFRAME blocks rendering on the main page, so we urgently need a way to load the IFRAME without blocking the rendering of the master page. What if we can do a non-blocking loading iframe? The idea has two: 1. Load iframe;2 directly using setTimeout asynchronous loading. The IFRAME is loaded after the page triggers onload. Words not much to say, the direct light code:

// setTimeout form setTimeout (function= ' other-page-url '0);

This approach is very concise, but it is important to note that if you need to onload perform certain actions after the page, you need to bind the function in the setTimeout callback load .

function= ' Other-page-url ';});

This approach is also simple and rude, and there is no setTimeout way to be flexible, not accurate to the IFRAME after loading, do some operations on the main page.

IFrame and cross-domain

Cross-domain is a common problem in our development process, and how to solve cross-domain problems, the network has a lot of feasible solutions, as for the final choice of what to deal with, but also the actual business scenario to choose the most appropriate scenario. Next, we will narrow down the scope of the solution and confine it to the IFRAME to explain several cross-domain scenarios.
In order to simulate cross-domain, we change the local hosts. Take Mac OS as an example:

// CD private/

Add the following code:

127.0. 0.1 demo.com 127.0. 0.1 cross.demo.com 127.0. 0.1 other.com

• Programme one:
  document.domain, this is a quasi-read-only property exposed by the browser (the reason is that it is quasi-read-only property, because it can be set to the current domain name of the super-domain), using this feature, you can realize the main domain name of the same sub-domain of different Web pages to achieve communication. The code is as follows:
  main.html(http://demo.com:15100/main.html)

<Script>Document.domain= 'demo.com'; window.alertframemsg= function(msg) {alert (msg);} Const frame=Document.queryselector ('#myFrame'); Frame.src= 'http://cross.demo:15100/frame-sets.html';</Script>

frame-sets.html (http://cross.demo:15100/frame-sets.html)

< Script >  ='demo.com';p arent.alertframemsg ('Hello, world! ' ); </ Script >

As you can see, it is only necessary to set the two to a document.domain hyper-domain, so that the main page and the IFRAME cross-domain communication. And the access to each other is very free (two-way communication)

• Scenario Two:
  window.postMessage, HTML5 provides an API that enables cross-domain communication to be secured. The syntax is very simple: the targetWindow.postMessage(data, targetOrigin) first parameter is the data to be passed, and happily the data to be sent to the target window is serialized using the structure cloning algorithm, which means that we can safely transfer the data object to the target window without having to serialize it ourselves. How do I receive data from the target window? Write the following code:

functionfalse);

evt.dataThat's the postMessage data passed in! Combined with the context, together:
main.html(http://demo.com:15100/main.html)

<Script>window.frames['MyFrame'].contentwindow.postmessage ({name:'Injser', Age: -}, 'http://other-demo.com:15100');</Script>

frame-sets.html(http://other.com:15100/frame-sets.html)

< Script > Window.addeventlistener ('message'  function  False); </ Script >

Deep understanding of IFRAME