[JavaScript] JavaScript handling of IFRAME actions

With the commanded, a few years ago the use of very frequent Frameset + frame has completed its mission of glorious discharge. As an alternative to frameset (let's say so), the use of IFrame is also more. The more frameset scenario, the IFRAME is more flexible to use and the document structure is more friendly.

This article on the JS operation IFrame in different browsers (yes, is also browser compatible ...) ) of the differences to do some explanation, and strive to summarize a suitable for all major browser solutions, the author only tested IE 6/7/8 (hereinafter referred to as IE) and Firefox 5.0 (hereinafter referred to as FF).

Conventions and Definitions

IFrameElement: Refers to the DOM element representation of an IFRAME, that is, a DOM object obtained by means of Document.getelemenetbyid () Iframeid: The property ID of the IFRAME, such as <iframe id= " Someid "> Iframename: Refers to the IFrame's property name, such as <iframe name=" Somename "> Iframeindex: The iframe index numbered from 0, if there are n frames in the page, The value range is 0–n-1 Iframewindow: Refers to the Window object of the IFRAME standard browser: a generic term for a Web browser, such as Firefox

one, the window object that gets the iframe in the parent page

Once you have the Window object, you can call the methods defined in the IFRAME page, and so on.

IE: Can be through Iframeid, Window.iframeid, Window.iframename, Window.frames[iframeid], Window.frames[iframename], Window.frames[iframeindex] and Iframeelement.contentwindow 6 ways to get the window object for the IFRAME.

FF: The Window object can be obtained through the 3 methods of Window.iframename, Window.frames[iframename] and Iframeelement.contentwindow.

Summary: To be compatible with most browsers, you should use Iframeelement.contentwindow to obtain them. See the following code:

2. <iframe id="iframe1" name= "iframe1" src="frame1.html"></iframe >
4. <script type="Text/javascript">
6. Gets the window object for the IFRAME
8. var iframe = document.getElementById (' iframe1 '). Contentwindow;
10. </Script>

Second, get the document object of the IFRAME in the parent page

The standard browser can refer to the Doument object of the IFRAME via iframeelement.contentdocument, but IE browser (again this ... Does not support, the exact said should be IE 6/7, the author found in IE8 can already use this method to obtain.

Of course, because document is a sub-object of window, you can also get the window object of the IFrame and then refer to it through window.document.

Summary: The following two methods should be used to obtain, see Code:

2. <iframe id="iframe1" src="frame1.html"></iframe>
6. <script type="Text/javascript">
8. Gets the document object for the IFRAME
10. Method 1
12. var iframe = document.getElementById (' iframe1 '). contentwindow.document;
16. Method 2
18. function Getiframedom (Iframeid) {
20. return document.getElementById (Iframeid). contentdocument | | Window.frames[iframeid].document;
22. }
24. </Script>

iii. iframe page Gets the window object of the parent page

Parent: Father Page Window object

Top: Topmost page Window object

Self: A Window object that always points to the current page (equivalent to window)

For all browsers, when you get the Window object of the parent page, you can access the global variables and functions defined by the parent page, which is often used in the iframe interaction.

[JavaScript] JavaScript handling of IFRAME actions