Introduction to js iframe operations _ javascript tips-js tutorial

This article introduces some examples of js iframe operations and code and steps. If you need them, refer to them. 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)

The Code is as follows:

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)

The Code is as follows:

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)

The Code is as follows:

Var ifr = document. createElement ('iframe ');
Ifr. src = 'HTTP: // www.jb51.net/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

Method 1:

The Code is as follows:

Method 2:
// Only ie supports passing such parameters for createElement

The Code is as follows:

Var ifr = document. createElement ('');
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.

The Code is as follows:

Var ifr = document. createElement ('iframe ');
Ifr. src = 'HTTP: // B .jb51.net/ 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.

The Code is as follows:

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