Home > Developer > JavaScript
Several Methods for jquery to operate iframe
This article provides a detailed summary of several methods for using jquery to operate iframe. For more information, see.
Iframe is often used in composite documents. Using jquery to operate iframe can greatly improve efficiency. Here we collect some basic operations
DOM method:
Parent window operation IFRAME: window. frames ["iframeSon" mirror.doc ument
IFRAME operation parent window: paipaiparent.doc ument
Jquery method:
In the parent window, select all input boxes in IFRAME: $ (window. frames ["iframeSon" ].doc ument). find (": text ");
In the IFRAME field, select all input boxes in the parent window: Response (w.w.parent.doc ument). find (": text ");
HTML of the iframe framework: <iframe src = "test.html" id = "iframeSon" width = "700" height = "300" frameborder = "0" scrolling = "auto"> </iframe>
1. In the parent window, select all radio buttons in IFRAME.
$ (Window. frames ["iframe1" cmd.doc ument). find ("input [@ type = 'Radio ']"). attr ("checked", "true ");
2. in IFRAME, select all radio buttons in the parent window
Vertex (w.w.parent.doc ument). find ("input [@ type = 'Radio ']"). attr ("checked", "true ");
Iframe framework:
<Iframe src = "test.html" id = "iframe1" width = "700" height = "300" frameborder = "0" scrolling = "auto"> </iframe>
The Code is as follows:
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<HEAD>
<MCE: SCRIPT mce_src = "js/jquery-1.2.6.js" src = "../js/jquery-1.2.6.js" type = "text/ecmascript"> </MCE: SCRIPT>
<MCE: SCRIPT type = "text/javascript"> <! --
$ (Function (){
$ ("# T1"). hover (function () {alert ('');});
// $ ("Iframe"). contents (). find ("body"). append ("I'm in an iframe! ");
// $ (Window. frames ["iframe1" 2.16.doc ument ). find ("input [@ type = 'text']"). attr ("size", "30px ");
// $ ("# Iframe1"). contents (). find ("# d1" ).css ('color', 'red ');
// $ (Window. frames ["iframe1" cmd.doc ument). find ("input [@ name = 't1']" cmd.css ({background: "#369 "});
// $ ("# Iframe1"). src ("test.html ");
});
// --> </MCE: SCRIPT>
<DIV>
<INPUT id = t1>
<IFRAME id = iframe1 src = "child.htm" mce_src = "child.htm"> </IFRAME>
<IFRAME height = 100 src = "child.htm" width = 300 mce_src = "child.htm"> </IFRAME>
</DIV>
<DIV>
</DIV>
Collect several methods to obtain elements in iframe using Jquery:
Certificate (document.getelementbyid('iframeid'{.content}document.body}.htm ()
Certificate (document.getelementbyid('iframeid'{.content}document.body}.htm ()
Displays the content of the body element in iframe.
$ ("# TestId", document. frames ("iframename" 2.16.document).html ();
$ ("# TestId", document. frames ("iframename" 2.16.document).html ();
Obtain the "testId" element based on iframename.
$ (Window. frames ["iframeName" cmd.doc ument). find ("# testId" cmd.html ()
$ (Window. frames ["iframeName" cmd.doc ument). find ("# testId" cmd.html ()
Same as above
Some examples of online collection:
Use jQuery to obtain the value of an element in the parent window in IFRAME.
We had to use the DOM method and jquery method to achieve this.
1. In the parent window, select all radio buttons in IFRAME.
$ (Window. frames ["iframe1" cmd.doc ument). find ("input [@ type = 'Radio ']"). attr ("checked", "true ");
2. in IFRAME, select all radio buttons in the parent window
Vertex (w.w.parent.doc ument). find ("input [@ type = 'Radio ']"). attr ("checked", "true ");
Iframe framework: <iframe src = "test.html" id = "iframe1" width = "700" height = "300" frameborder = "0" scrolling = "auto"> </iframe>
IE7 passed the test
Use jquery to operate iframe
1. The content contains two ifame
<Iframe id = "leftiframe"... </iframe>
<Iframe id = "mainiframe... </iframe>
In leftiframe, jQuery changes the src code of mainiframe:
$ ("# Mainframe", parent.doc ument. body). attr ("src", "http://www.jb51.net ")
2. If the content contains an ifame with the ID of mainiframe
<Iframe id = "mainifame"...> </ifame>
Ifame contains a someID
<Div id = "someID"> you want to get this content </div>
Get someID content
$ ("# Mainiframe "). contents (). find ("someID" ).html () html or $ ("# mainiframe "). contains (). find ("someID "). text () Value
3. In the parent window, select all radio buttons in IFRAME.
$ (Window. frames ["iframe1" cmd.doc ument). find ("input [@ type = 'Radio ']"). attr ("checked", "true ");
Then the find method is still used to select the id.
$ (Window. frames ["iframe1" cmd.doc ument). find ("# id ")
4. As shown above
Content someID of the mainiframe operated by jQuery in leftiframe
$ ("# Mainframe", parent.doc ument. body ). contents (). find ("someID" ).html () or $ ("# mainframe", parent.doc ument. body ). contents (). find ("someID "). val ()
Use JavaScript to manipulate iframe
Mutual reference between frameworks
All frames on a page are provided as properties of the window object in the form of a set, for example, window. frames indicates the set of all frames on the page. This is similar to form objects, link objects, and image objects. The difference is that these sets are the attributes of document. Therefore, to reference a sub-framework, you can use the following syntax:
Window. frames ["frameName"];
Window. frames. frameName
Window. frames [index]
The window can also be replaced or omitted by self. If frameName is the first frame on the page, the following statements are equivalent:
Self. frames ["frameName"]
Self. frames [0]
Frames [0]
FrameName
Each framework corresponds to an HTML page, so this framework is also an independent browser window, which has all the properties of the window. The so-called reference to the framework is also a reference to the window object. With this window object, you can easily perform operations on the pages. For example, you can write data to the page by using the plain Doc ument object, or use the window. location attribute to change pages in the framework.
The following describes the mutual references between frameworks of different levels:
1. Reference from parent framework to Child Framework
With the above principles, it is very easy to reference the sub-framework from the parent framework, that is:
Window. frames ["frameName"];
In this way, the sub-framework named frameName in the page is referenced. If you want to reference the sub-framework in the sub-framework, the referenced framework is actually the nature of the window object, which can be implemented as follows:
Window. frames ["frameName"]. frames ["frameName2"];
In this way, the second-level sub-framework can be referenced, and so on.
2. references from the Child Framework to the parent framework
Each window object has a parent attribute, indicating its parent framework. If the framework is already a top-level framework, window. parent also indicates the framework itself.
3. Reference between sibling frameworks
If the two frameworks are the same as the Child frameworks of the same framework, they are called the sibling frameworks, you can use the parent framework to reference each other. For example, a page contains two child frameworks:
<Frameset rows = "50%, 50%">
<Frame src = "1.html" name = "frame1"/>
<Frame src = "2.html" name = "frame2"/>
</Frameset>
In frame1, you can use the following statement to reference frame2:
Self. parent. frames ["frame2"];
4. Mutual reference between frameworks of different levels
The framework layer is for the top-level framework. When the layers are different, you only need to know your own layers and the layers and names of another framework, and use the window object properties referenced by the Framework to easily implement mutual access. For example:
Self. parent. frames ["childName"]. frames ["targetFrameName"];
5. Reference to the top-level framework
Similar to the parent attribute, the window object also has a top attribute. It indicates a reference to the top-level framework, which can be used to determine whether a framework itself is a top-level framework. For example:
// Determine whether the framework is a top-level framework
If (self = top ){
// Dosomething
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
