jquery manipulating the elements and methods of the IFRAME parent page and the child pageUpdated: 2011-05-05 Source: Internet fonts: "Big small"-JQUERY IFRAME
Here is a simple use of jquery to manipulate some of the IFRAME records, this use of pure JS can also be achieved.
First, the method of finding the parent page element in the IFRAME: $ (' #id ', window.parent.document)
Second, get the element method in the IFRAME in the parent page: $ (this). Contents (). Find ("#suggestBox")
Third, call the methods and variables defined in the parent page in the IFRAME: Parent.method parent.value
The IFrame gets the parent page body with jqueryiframe.html
1<Html>2<ScriptSrc= ' Jquerymin.js '></Script>3<BodyId= ' 1 '>4<Div>it is a IFRAME</Div>5</Body>6<Script>7$ (document). Ready (8function(){9VarC = $ (window.parent.document.body) ten // Troublesome method: var c = $ (window). EQ (0) [0].parent.doc ument). Find (' body '); , forget to use the previous method of the alert (c.html ()); ); </Script> </html>
content.html
<HTML> <Scriptsrc= ' Jquerymin.js '></Script><BodyID= ' fa '> <iframesrc= ' iframe.html 'width= ' + 'Height= ' + '></iframe> <BR> <BR> <BR> <DivID= ' Mydiv '>Content iframe</Div></Body> <Script> functionA () {alert (1); } alert (document). text ()); </Script></HTML>
jquery, JS calling method of the iframe parent window and child window elements
1. jquery Gets the parent page element code in the IFRAME sub-page as follows:
$ ("#objid", parent.document)
2. jquery Gets the element code for the IFRAME sub-page on the parent page 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 ();