jquery operation IFRAME Framework Instance usage instructions

Getting objects in an IFRAME

jquery doesn't seem to be able to get elements directly through the framework, but with Dom and jquery, you can get the document object for the IFRAME. With this object, it is convenient to use jquery.

The code is as follows	Copy Code
var subdoc=$ (document.getElementById (' frame1 '). contentwindow.document;

But there's going to be a problem here.

If you can make sure that you run your subsequent code, the child framework is ready, of course, there is no problem. But often our jquery code is often used to do some initialization of the action, this time, although you bind the parent window of the ready event, but in fact, the frame is not necessarily ready, so, if you want to give the framework to do some initialization work, you must bind from the framework of document The Ready event.

1, there are two ifame in the content

The code is as follows	Copy Code
<iframe id= "Leftiframe" ...</iframe> <iframe id= "Mainiframe. </iframe>

Leftiframe jquery Changes the SRC code of the Mainiframe:

The code is as follows	Copy Code
$ ("#mainframe", Parent.document.body). attr ("src", "http://www.111cn.net")

2, if the content has an ID for mainiframe ifame

The code is as follows	Copy Code
<iframe id= "Mainifame" ...></ifame> Ifame contains a Someid <div id= "Someid" >you want to get this content</div>

Get the content of Someid

$ ("#mainiframe"). Contents (). Find ("Someid"). html () HTML or $ ("#mainiframe"). Contains (). Find ("Someid"). Text () value

3. Select all radio buttons in the iframe in the parent window

The code is as follows	Copy Code
$ (window.frames["iframe1"].document). Find ("input[@type = ' Radio ']"). attr ("Checked", "true");

The choice ID is still using the Find method

The code is as follows	Copy Code
$ (window.frames["iframe1"].document). Find ("#id")

4, as shown above
Mainiframe content Someid content of jquery operations in Leftiframe

The code is as follows	Copy Code
$ ("#mainframe", Parent.document.body). Contents (). Find ("Someid"). HTML () or $ ("#mainframe", Parent.document.body). Contents (). Find ("Someid"). Val ()

Parent and child pages manipulate each other

A.html page

The code is as follows

Copy Code

<script language= "javascript" src= "/js/jquery.js" type= "Text/javascript" ></script> <script type= "Text/javascript" > function f () { $ (' #a '). Contents (). Find ("#bbb"). Val ("ddd"); } function Fun () { Alert (' function that pops up a page call '); } </script> <div id= "Maindiv" >test</div> Id= "A" name= "a" src= "b.html" width= "<iframe" height= "></iframe><br" <input type= "button" value= "Assign value to subpage form" onclick= "f ()"/>

B.html page

The code is as follows

Copy Code

<script language= "javascript" src= "/js/jquery.js" type= "Text/javascript" ></script> <script type= "Text/javascript" > function f () { Alert (' Start calling parent page function '); $ (Window.parent.fun ()); $ (window.parent.$ ("#maindiv"). HTML ("values assigned by subpages"); } </script> <form name= "Cform" ><input type= "text" name= "B" id= "BBB"/><input name= "btn" type= "button" onclick= "F ()" Value= "Call the parent function and assign a value to the parent page element"/></form>

self-adaptive height of iframe

IFRAME code, note to write ID

The code is as follows	Copy Code
<iframe src= "test.html" id= "main" width= "M" height= "" frameborder= "0" scrolling= "Auto" ></iframe>

jquery Code 1:

The code is as follows	Copy Code
Note: The following code is placed in the test.html call $ (window.parent.document). Find ("#main"). Load (function () { var main = $ (window.parent.document). Find ("#main"); var thisheight = $ (document). Height () +30; Main.height (Thisheight); });

jquery Code 2:

code is as follows	copy code
//NOTE: The following code is placed in and I Frame the same page calls $ (#main). Load (function () { var mainheight = $ (this). Contents (). Find ("body"). Height () +30; $ (this). Height (mainheight); });