Tips for js iframe operations

1. Get the window object of iframe
Cross-origin access restriction exists.

Chrome: iframeElement. contentWindow
Firefox: iframeElement. contentWindow
Ie6: iframeElement. contentWindow

Article Iframes, onload, and document. domain says "he iframe element object has a property called contentDocument that contains the iframe's document object, so you can use the parentWindow property to retrieve the window object. "means some browsers can use iframeElement. contentDocument. parentWindow: get the window object of iframe. However, the element. contentDocument object of firefox and chrome has no parentWindow attribute.

[Javascript]
Function getIframeWindow (element ){
Return element. contentWindow;
// Return element. contentWindow | element. contentDocument. parentWindow;
}
2. Get the document Object of iframe
Cross-origin access restriction exists.

Chrome: iframeElement. contentDocument
Firefox: iframeElement. contentDocument
Ie: element.content+doc ument
Note: ie does not have the iframeElement. contentDocument attribute.

[Javascript]
Var getIframeDocument = function (element ){
Return element. contentDocument | element.content##doc ument;
};

3. Get the window object of the parent page in iframe
Cross-origin access restriction exists.

Parent page: window. parent
Top page: window. top
Applicable to all browsers

4. Obtain the html Tag of iframe in the parent page
Cross-origin access restriction exists.

Window. frameElement (type: HTMLElement), applicable to all browsers

5. iframe onload event
Non-ie browsers provide onload events. For example, the following code does not have a pop-up box in ie.

[Javascript]
Var ifr = document. createElement ('iframe ');
Ifr. src = 'HTTP: // www. B .com/index.php ';
Ifr. onload = function (){
Alert ('loaded ');
};
Document. body. appendChild (ifr );

However, ie seems to provide the onload event. The following two methods will trigger the onload
[Javascript]
Method 1:
<Iframe onload = "alert ('loaded');" src = "http://www. B .com/index.php"> </iframe>

Method 2:
// Only ie supports passing such parameters for createElement
Var ifr = document. createElement ('<iframe onload = "alert ('loadd');" src = "http://www. B .com/index.php"> </iframe> ');
Document. body. appendChild (ifr );

Because the iframe element is included in the parent page, the above methods do not have cross-origin issues.

In fact, IE provides an onload event, but it must be bound using attachEvent.

[Javascript]
Var ifr = document. createElement ('iframe ');
Ifr. src = 'HTTP: // B .a.com/ B .php ';
If (ifr. attachEvent ){
Ifr. attachEvent ('onload', function () {alert ('loaded ');});
} Else {
Ifr. onload = function () {alert ('loaded ');};
}
Document. body. appendChild (ifr );

6. frames
Window. frames can get frames (iframe, frame, etc.) in the page. It should be noted that the window object is obtained, not the HTMLElement.

[Javascript]
Var ifr1 = document. getElementById ('ifr1 ');
Var ifr1win = window. frames [0];
Ifr1win. frameElement === ifr1; // true
Ifr1win === ifr1; // false

Author: malimalihun