Jquery iframe framework instance instructions

Iframe operations have always been an interesting issue. I will often introduce you to using js to operate ifame, including passing values, taking values, and replacing src, next I will introduce jquery's iframe operation code.

Get the object in iframe

JQuery does not seem to be able to directly retrieve elements across the framework. However, combined with DOM and JQuery, you can obtain the document Object of iframe. With this object, it is convenient to use jquery again.

The Code is as follows:	Copy code
Var subdoc=(document.getelementbyid('frame1'{.content}w.doc ument;

But there is a problem here.

If you can ensure that the sub-framework is ready when you run your subsequent code, of course, there is no problem. But our JQuery code is often used for initialization. At this time, although you have bound the ready event of the parent window, the self-framework is not necessarily ready at this time. So, to initialize the self-framework, you must bind the ready event of the Self-framework document.

1. The content contains two ifame

The Code is as follows:	Copy code
<Iframe id = "leftiframe "... </Iframe> <Iframe id = "mainiframe... </iframe>

In leftiframe, jQuery changes the src code of mainiframe:

The Code is as follows:	Copy code
Certificate (domainframework,parent.doc ument. body). attr ("src", "http://www.bKjia. c0m")

2. If the content contains an ifame with the ID of mainiframe

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 someID content

Certificate (registry.mainiframe=2.16.contents().find(+someid=).html () html or $ ("# mainiframe"). contains (). find ("someID"). text () Value

3. In the parent window, select all radio buttons in IFRAME.

The Code is as follows:	Copy code
$ (Window. frames ["iframe1" cmd.doc ument). find ("input [@ type = 'Radio ']"). attr ("checked", "true ");

Then the find method is still used to select the id.

The Code is as follows:	Copy code
$ (Window. frames ["iframe1" cmd.doc ument). find ("# id ")

 

4. As shown above
Content someID of the mainiframe operated by jQuery in leftiframe

The Code is as follows:	Copy code
Upload () or upload (domainframework,parent.doc ument. body). contents (). find ("someID"). val ()

Parent and Child pages operate on 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 called on the subpage '); } </Script> <Div id = "maindiv"> test </div> <Iframe id = "a" name = "a" src = "B .html" width = "600" height = "400"> </iframe> <br/> <Input type = "button" value = "assign a value to the 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 the parent page function '); $ (Window. parent. fun ()); $ (Window. parent. $ ("# maindiv" ).html ("subpage assigned value ")); } </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 element on the parent page "/> </form>

Iframe adaptive height

Iframe code. Be sure to write the ID

The Code is as follows:	Copy code
<Iframe src = "test.html" id = "main" width = "700" height = "300" frameborder = "0" scrolling = "auto"> </iframe>

Jquery code 1:

The Code is as follows:	Copy code
// Note: the following code is stored in test.html for calling. Vertex (w.w.parent.doc ument). find ("# main"). load (function (){ Var main = warn (window.parent.doc ument). find ("# main "); Var thisheight = $ (document). height () + 30; Main. height (thisheight ); });

Jquery Code 2:

The Code is as follows:	Copy code
// Note: the following code is put on the same page as iframe for calling. $ ("# Main"). load (function (){ Var mainheight = $ (this). contents (). find ("body"). height () + 30; $ (This). height (mainheight ); });