1. jquery Gets the parent page element code in the IFRAME sub-page as follows:
$ ("#objid", parent.document)
2. jquery Gets the elements of the IFRAME child page on the parent page
The code is as follows:
$ ("#objid", Document.frames (' Iframename '). Document)
3.js Gets the parent page element code in the IFRAME sub-page as follows:
Indow.parent.document.getElementByIdx_x ("Element id");
4.js gets the IFRAME child page element code on the parent page as follows:
window.frames["iframe_id"].document.getelementbyidx_x ("element ID");
5. Call the parent class function inside the subclass IFRAME:
Window.parent.func ();
Using the native JS on the parent page to get the elements of the IFRAME sub-page, as well as the child page to get the parent page elements, which is usually used in the method, here is an example to summarize the following:
1. Parent page (demo.html), modify sub-page in parent page the background color of the div is gray and the original is red:
[HTML]View PlainCopy
- <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv= "content-type" content= "text/html; Charset=utf-8 " />
- <title>demo Main Page </title>
- <script type="Text/javascript">
- window.onload = function () {
- var _iframe = document.getElementById (' Iframeid '). Contentwindow;
- var _div =_iframe.document.getelementbyid (' objId ');
- _div.style.backgroundcolor = ' #ccc ';
- }
- </Script>
- </head>
- <body>
- <div id=' Pardiv '> Parent page </div>
- <iframe src="demo-iframe.html" id="Iframeid" height= "Width=" ></iframe>
- </body>
- </html>
2, sub-page (demo-iframe.html), in the child page to modify the parent page div font color is red, originally black:
[HTML]View PlainCopy
- <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv= "content-type" content= "text/html; Charset=utf-8 " />
- <title> sub-page demo13-iframe.html</title>
- <script type="Text/javascript">
- window.onload = function () {
- var _iframe = window.parent;
- var _div =_iframe.document.getelementbyid (' Pardiv ');
- _div.style.color = ' red ';
- }
- </Script>
- </head>
- <body>
- <div id= 'objId ' style=' width:100px;height:100px;background-color:red; ' > Sub page </div>
- </body>
- </html>
3.:
(1) When JS is not added:
(2) after adding JS:
jquery, JS call the method of the iframe parent window and child window elements