JS operation iframe of javascript

JS operation iframe

    1. Obtain the window object
    of the iframe 2. Obtain the document object of the
    iframe 3. Obtain the window object
    of the parent page in the iframe 4. Obtain the html tag of the iframe in the parent page
    5. The onload event of the iframe
    6. Frame
    reference article

1 .

There are cross-domain access restrictions to obtain the window object of .

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." means that some browsers can get the iframe's window object through iframeElement.contentDocument.parentWindow. But after testing, the element.contentDocument object of firefox and chrome has no parentWindow property.

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

2. Obtain the document object of the iframe

There are cross-domain access restrictions.

chrome: iframeElement.contentDocument
firefox: iframeElement.contentDocument
ie: element.contentWindow.document
remark: ie has no iframeElement.contentDocument property.

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

3. The window object

of the parent page obtained in the iframe has cross-domain access restrictions.

Parent page: window.parent
Top-level page: window.top
Applicable 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), suitable for all browsers
5. iframe onload event

non- ie browsers provide onload event. For example, the following code will not have a popup box in ie.

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 an onload event, the following two methods will trigger onload

method one:
<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('loaded');" src ="http://www.b.com/index.php"></iframe>');
document.body.



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

var ifr = document.createElement('iframe');
ifr.src = 'http://bacom/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 the window object is obtained, not HTMLElement.

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

refer to article

    Iframes, onload, and document .domain
    [Translation] Iframe, onload and document.domain
    "JS Authoritative Guide Fifth Edition"



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