JS Operation IFrame

• 1. Window object that obtains the IFRAME
• 2. Obtain the Document object for the IFRAME
• 3. The Window object in the IFRAME that gets the parent page
• 4. Get the HTML tag of the IFRAME in the parent page
• 5. OnLoad event for IFrame
• 6. Frames
• Reference articles

1. Window object that obtains the IFRAME

There are cross-domain access restrictions.

Chrome:iframeelement. Contentwindow
Firefox:iframeElement.contentWindow
Ie6:iframeElement.contentWindow

Article IFRAMEs, onload, and Document.domain said "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 can get the window object of the IFRAME via IframeElement.contentDocument.parentWindow. But after testing Firefox, Chrome's Element.contentdocument object does not have a ParentWindow attribute.

function Getiframewindow (Element) {    return  Element.contentwindow;    return  Element.contentwindow | | Element.contentDocument.parentWindow;}

2. Obtain the Document object for the IFRAME

There are cross-domain access restrictions.

Chrome:iframeElement.contentDocument
Firefox:iframeElement.contentDocument
Ie:element.contentWindow.document
Note: IE does not have a iframeelement.contentdocument attribute.

var getiframedocument = function (Element) {    return  element.contentdocument | | element.contentWindow.document ;};

3. The Window object in the IFRAME that gets the parent page

There are cross-domain access restrictions.

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

4. Get the HTML tag of the IFRAME in the parent page

There are cross-domain access restrictions.

Window.frameelement (Type: htmlelement) for all browsers

5. OnLoad event for IFrame

The onload event is available in non-IE browsers. For example, the following code in IE will not have a popup box.

var IFR = document.createelement (' iframe '); ifr.src = ' http://www.b.com/index.php '; ifr.onload = function () {    alert ( ' Loaded ');}; Document.body.appendChild (IFR);

But IE seems to provide the OnLoad event, the following two ways will trigger the OnLoad

Method One: <iframe  onload= "alert (' Loaded ');"  Src= "http://www.b.com/index.php" ></iframe> method Two://only IE is supported for createelement transfer such parameters var IFR = Document.createelement (' <iframe  onload= ' alert (' Loaded '); "src=" http://www.b.com/index.php "></ Iframe> ');d ocument.body.appendChild (IFR);

Because the IFRAME element is contained in the parent page, there are no cross-domain issues with the above methods.

In fact, IE provides the OnLoad event, but must be bound using attachevent.

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 fetch frames from the page (iframe, frame, etc.), it is important to note that the window object is taken, not the htmlelement.

var ifr1 = document.getElementById (' ifr1 '); var Ifr1win = Window.frames[0];ifr1win.frameelement = = = IFR1;   Trueifr1win = = = IFR1;    False

Reference articles

• Iframes, onload, and Document.domain
• "Translation" Iframe, onload and Document.domain
• The fifth edition of JS authoritative guide

Original address: http://www.cnblogs.com/rainman/archive/2011/02/16/1956431.html

There is also an article that operates an IFRAME: http://blog.163.com/very_apple/blog/static/27759236201092892549494/

JS Operation IFrame