Iframe window interactive learning (a) of

When using nested iframe page, parent page if you want to get the contents of sub-pages inside, you can use contentWindow or contentDocument

grammar

contentWindow：iframeObject.contentWindow

contentDocument：iframeObject.contentDocument

the difference

1, contentWindow which is a read-only attribute, returns the object specified iframe window. Although it is not part of the standard, but each major browsers support. (Returns iframe window object, all major browsers so far)

2, contentDocument able to return iframe HTML object to the documents, the object can be treated Firefox support to be returned by all the standard DOM methods, IE6, IE7 do not support, IE8 support to start, need such access document.frames [ 'J_mainframe '] .document. (Returns iframe document object, some browsers support)

Compatible obtain the document object: 

var getIFrameDoc = function(){
    var iobj = document.createElement("iframe");
    document.getElementsByTagName("body")[0].appendChild(iobj);
    return iobj.contentDocument || iobj.contentWindow.document;
}

 or

function changeStyle(){
    var x=document.getElementById("myframe");
    var y=(x.contentWindow || x.contentDocument);
    if (y.document)y=y.document;
    y.body.style.backgroundColor="#0000ff";
}

Basic use

Child window parent window to obtain information

Gets the child window of the window object:

1, document.getElementById ( "myiframe") contentWindow:. After obtaining iframe object, you can get the window object of the page containing the iframe by contentWindow, then you can normally access the page elements;

2, $ ( "# myiframe") [0] .contentWindow: jquery selector obtain iframe, jquery object into first DOM object, or using get () method conversion;

Parent window and the child window interaction && child window and sub-window interactive

A sub-window in the parent window elements:

. After the $ ( "# myiframe") [0] .contentWindow $ ( "# dd") val (), can be obtained in the iframe window object then using jquery selector for page operation;

Parent window parameter passed to the child window:

$ ( "# Myiframe") [0] .contentWindow.username = "zhangsan"; page can be transmitted in this way to the iframe parameters, to obtain the window sub-window, then the data transfer is desired to mount an object on the window

Child window parent window acquisition parameters passed:

In the iframe page window.username can get to values, username is the custom global variables;

Child window operation parent window elements:

parent.document.getElementById ( "test"); in the iframe page can be obtained through the main page of the parent window, and then they can access the elements of the page to normal father;

top.document.getElementById ( "test"); in the iframe top page acquired by the top, that is used when nested iframe;

Example:

. Top $ ( "iframe [name = 'iframeWindow']") [0] .contentWindow $ ( "# inside_tableElement"), in order to get to the iframe element Note:.. Top $ ( "iframe [name = ' iframeWindow '] "). eq (0). $ (" # inside_tableElement "), is to obtain less than

Call each other between the same level child window:

. Parent $ ( "# frame_A") [0] .contentWindow.document.getElmentById ( "# frame_B"); peer calls between iframe page, you need to get his father's window, and then call the iframe window to get the same level of operation ;

reference

iframe.contentWindow attributes: About contentWindow and distinguish contentDocument