Summary of several ways jquery operates on iframe
- 2020-03-30 00:52:57
- OfStack
Iframes are used a lot in composite documents, and working with iframes with jquery can be a great way to improve your productivity. Here are some basic operations
DOM methods:
The parent window operates on IFRAME: window.frames["iframeSon"].document
IFRAME operation parent window: window.parent.document
Jquery methods:
In the parent window, select all input boxes in the IFRAME: $(window.frames["iframeSon"].document). Find (":text");
In the IFRAME operation, select all input fields in the parent window: $(window.parent.document). Find (":text");
Iframe frame HTML: < 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 the IFRAME
$(window frames [r]. "iframe1" document), find (" input [@ type = 'radio'] "). The attr (" checked ", "true");
2. Operate all the radio buttons in the selected parent window in the IFRAME
$(window. The parent. The document). The find (" input [@ type = 'radio'] "). The attr (" checked ", "true");
Iframe:
< Iframe SRC ="test.html" id="iframe1 "width="700" height="300 "frameborder="0" scrolling="auto"> < / iframe>
<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"].document).find("input[@type='text']").attr("size","30px");
//$("#iframe1").contents().find("#d1").css('color','red');
//$(window.frames["iframe1"].document).find("input[@name='t1']").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>
Collection of several ways to get elements in an iframe using Jquery:
The $(document) getElementById (' iframeId). ContentWindow. Document. The body). HTM ()
The $(document) getElementById (' iframeId). ContentWindow. Document. The body). HTM ()
Displays the contents of the body element in the iframe.
$(" # testId, "the document. The frames (" iframename"). The document). The HTML ();
$(" # testId, "the document. The frames (" iframename"). The document). The HTML ();
According to iframename obtain the ID to "testId" elements
$(window frames [r]. "iframeName" document), find (" # testId "). The HTML ()
$(window frames [r]. "iframeName" document), find (" # testId "). The HTML ()
Role as above
Collect some examples online:
Get the value of an element of the parent window in the IFRAME with jQuery
DOM method and jquery method to combine the way to achieve
1. In the parent window, select all radio buttons in the IFRAME
$(window frames [r]. "iframe1" document), find (" input [@ type = 'radio'] "). The attr (" checked ", "true");
2. Operate all the radio buttons in the selected parent window in the IFRAME
$(window. The parent. The document). The find (" input [@ type = 'radio'] "). The attr (" checked ", "true");
Iframe: < Iframe SRC ="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"> < / iframe>
IE7 passed the test
Use jquery to manipulate the iframe
There are two ifame in the content
< The iframe id = "leftiframe"... < / iframe>
< The iframe id = "mainiframe.. < / iframe>
JQuery in leftiframe changes the SRC code of mainiframe:
$(" # mainframe ", the parent. The document. The body). Attr (" SRC ", "/ / www.jb51.net")
2. If the content contains an ifame with the ID mainiframe
< The iframe id = "mainifame"... > < / ifame>
Ifame contains a someID
< Div id = "someID" > You want to get this content< / div>
Get the content of someID
$(" # mainiframe "). The contents (.), find (" someID "). The HTML () HTML or $(" # mainiframe "). The contains (). The find (" someID "). The text () value
3. In the parent window, select all radio buttons in the IFRAME
$(window frames [r]. "iframe1" document), find (" input [@ type = 'radio'] "). The attr (" checked ", "true");
The natural choice for id is to still use the find method
$(window frames [r]. "iframe1" document), find (" # id ")
4. As shown above
The jQuery operation in leftiframe is the content of the content of someID of the mainiframe
$(" # mainframe ", the parent. The document. The body). The contents (.), find (" someID "). The HTML () and $(" # mainframe ", the parent. The document. The body). The contents (.), find (" someID "). Val ()
Manipulate iframes with JavaScript
Cross-reference between frameworks
All frames in a page are provided as properties of window objects in the form of a collection. For example, window.frames represents the collection of all frames on the page. This is similar to form objects, link objects, picture objects, etc., except that these collections are properties of documents. Therefore, to refer to a subframe, use the following syntax:
Window. Frames [" frameName "];
Window. The frames. FrameName
Window. Frames [index]
The word "window" can also be replaced or omitted by self. If frameName is the first frame on the page, the following is equivalent:
Self. -- [" frameName "]
The self. The frames [0]
Frames [0]
frameName
Each frame corresponds to an HTML page, so this frame is also a separate browser window, which has all the properties of a window. A reference to a frame is a reference to a window object. With this window object, you can easily manipulate the pages in it, such as using the window.document object to write data to the page, using the window.location property to change the pages in the frame, and so on.
The following are the cross-references between different hierarchical frameworks:
1. Parent frame to child frame reference
Knowing the above principle, it is very easy to refer to the child framework from the parent framework, that is:
Window. Frames [" frameName "];
This references the frameName subframe on the page. If you want to refer to the subframe within the subframe, according to the nature that the frame referenced is actually the window object, you can achieve the following:
Window. The frames [r]. "frameName" frames (" frameName2 ");
This refers to a second-level subframe, and by extension, a reference to a multilevel frame.
2. A reference from the child frame to the parent frame
Each window object has a parent attribute that represents its parent framework. If the framework is already a top-level framework, window.parent also represents the framework itself.
3. References between brother frames
If two frames are subframes of the same frame, they are called sibling frames and can be cross-referenced by the parent frame. For example, a page contains two subframes:
< Frameset rows = 50%, 50%, "" >
< Frame SRC = "1. HTML" name = "frame1" / >
< Frame SRC = "2. HTML" name = "frame2" / >
< / frameset>
Frame1 can be referenced to frame2 using the following statement:
The self. The parent. Frames (" frame2 "),
4. Cross-references between frameworks at different levels
The hierarchy of the framework is for the top-level framework. When there are different levels, as long as you know your level and the level and name of another framework, you can easily access each other by using the properties of window objects referenced by the framework, such as:
The self. The parent. Frames [r]. "childName" frames (" targetFrameName ");
5. A reference to the top-level framework
Like the parent attribute, the window object also has a top attribute. It represents a reference to the top-level framework, which can be used to determine whether a framework is itself a top-level framework, for example:
// determines whether the framework is the top-level framework
If (self = = top) {
/ / dosomething
}