Introduction to some methods of js operating iframe_javascript skills

1. Obtain the window object of iframe
There are cross-domain access restrictions.

chrome: iframeElement.contentWindow
firefox: iframeElement.contentWindow
ie6: iframeElement.contentWindow

The 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." This means that some browsers The iframe's window object can be obtained through iframeElement.contentDocument.parentWindow. However, after testing, the element.contentDocument object of firefox and chrome does not have a parentWindow attribute.

(javascript)

Copy code The code is as follows:

function getIframeWindow(element){
return element.contentWindow;
//return element.contentWindow || element.contentDocument.parentWindow;
}

2. Obtaining the document object of the iframe
There are cross-domain access restrictions.

chrome: iframeElement.contentDocument
firefox: iframeElement.contentDocument
ie: element.contentWindow.document
Note: ie does not have the iframeElement.contentDocument property.

(javascript)

Copy code The code is as follows:

var getIframeDocument = function(element ) {
return element.contentDocument || element.contentWindow.document;
};

3. The window object obtained from the parent page in the iframe
has cross-domain access restrictions.

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

4. Obtain the html tag of iframe in the parent page
There are cross-domain access restrictions.

window.frameElement (type: HTMLElement), works in all browsers

5. iframe onload event
All non-ie browsers provide onload event. For example, the following code will not have a pop-up box in IE.

(javascript)

Copy code 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);

But IE seems to provide onload event, the following two methods will trigger onload

Method 1:

Copy the code The code is as follows:

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

Copy code The code is as follows:

var ifr = document.createElement('');
document.body.appendChild(ifr);

Since the iframe element is included in the parent page, there is no cross-domain problem with the above methods.

Actually IE provides the onload event, but it must be bound using attachEvent.

Copy code 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 the frames in the page (iframe, frame, etc.). It should be noted that it is the window object, not the HTMLElement.

Copy code The code is as follows:

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