JavaScript dom manipulation of the IFRAME

In IE6, IE7, we can use Document.frames[id].document to access the Document object in the IFrame Subwindow, but this is not in line with the standard of the writing, is also the unique method under IE, It is not available under Firefox, and Firefox uses the document.getElementById (ID) in accordance with the standard. Contentdocument method, today I write an instance, through IE8 test, IE8 is also a document.getElementById (ID) that is used in accordance with the standard. Contentdocument method. So we can write a function to get the IFRAME document object in IE and Firefox-getiframedom:

1	functiongetIFrameDOM(id){

2	returndocument.getElementById(id).contentDocument || document.frames[id].document;

3

}

If we want to get the window object of the IFRAME, not the Document object, you can use document.getElementById (ID). Contentwindow method. This allows us to use the Window object in the Subwindow, such as a function in a subwindow. Anda Shangqiang Antique

In the Subwindow, we can get the window object of the parent windows through the parents, if we have a function of getiframedom in the parent window, We can call it through parent.getiframedom, so we can access the document object of the parent window in the child window using Parent.document.

Parent window manipulating the DOM in the IFRAME

JS operates the DOM in the IFRAME but uses the Contentwindow property, which refers to the window object where the specified frame or IFRAME is located. The Contentwindow property of an IFRAME or frame in IE can be omitted, but if you want to edit an IFrame object in Firefox, you must specify the Contentwindow property, and the Contentwindow property supports all major browsers.

There is also a contentdocument property, which refers to the document object where the specified frame or IFRAME resides, but the tragedy is that IE6-IE7 does not support this property.

IE6 and IE7 can also use the document.frames["iframe Name"] or document.frames["iframe ID" to get the equivalent Contentwindow property, Firefox and Chrome do not support these document.frames["IFRAME name"] or document.frames["iframe ID", but window.frames["iframe name"] or Window.frames[index] (index is an indexed value) also supports all major browsers.

We know that the document object is a sub-object of the Window object, so we can pass the document.getElementById ("iframe ID"). Contentwindow.document to get the document object for the IFRAME, which is equivalent to the Contentdocument property.

The DOM of the parent window of the JS operation in the IFRAME

JS in an IFRAME to manipulate the DOM of the parent window, you must understand several objects:

• The parent is the Father window (if the window is a top-level window, then Parent==self==top).
• Top is the top-level parent window (some windows have several layers of frameset or IFRAME).
• The self is the current window (equivalent Windows).
• Opener is the window that opens the current window with the open method.

So JS in the IFRAME to manipulate the DOM of the parent window can get the window object of the parent windows by parent,top These objects, for example:

1	parent.document.getElementById("dom ID")；

Parent,top can also call the parent window of the JS method, for example, Getiframedom (IID) is a parent window of a method, then the IFRAME can use Parent.getiframedom ("Wiframea") To invoke the Getiframedom (IID) method of the parent window;

While the IFRAME is less used in web development today, there are many things that are worth using in the IFRAME, For example, use an IFRAME to solve cross-domain problems. There is a lot to learn about IFRAME, such as IFRAME adaptive height, using IFRAME to solve cross-domain problems, iframe loading problems, IFRAME loading performance issues, and many more things to learn.

Finally, attach an HTML that opens the specified page in the specified IFRAME:

View Source print?

"	< Code class= "keyword" >div  class = "refresh"  style = "MARGIN-RIGHT:4EM;" >

Geneva

;    < label > < input  type = "Radio"  name = Code class= "string" "channel" onclick = "window.frames[' usermessage-content-frame '].location.href= ' admin05_0.php ';"  /> pending trial </ label >

"	;    < label > < input  type = "Radio"  name = Code class= "string" "channel" onclick = "window.frames[' usermessage-content-frame '].location.href= ' admin05_1.php ';"  /> has been examined </ label >

"	;    < label > < input  type = "Radio"  name = Code class= "string" "channel" onclick = "window.frames[' usermessage-content-frame '].location.href= ' admin05_2.php ';"  /> deleted </ label >

"	;    < label > < input  type = "Radio"  name = Code class= "string" "channel" onclick = "window.frames[' usermessage-content-frame '].location.href= ' admin05.php ';"  checked = "checked"  /> all </ label >

"

</ div >

07	<divclass="refresh"><ahref="javascript:void(0);"onclick="javascript:refreshContent(‘usermessage-content-frame‘);">刷新</a></div>

08

"	< Code class= "keyword" >div  id = "Usermessage-content-div"  class = "MARGINTOP5 Contentiframe" >

ten	;    < iframe   id = "Usermessage-content-frame"  name = "Usermessage-content-frame"  frameborder = "0"  src = "page05.php" ></ iframe >

11

</div>

JavaScript dom manipulation of the IFRAME