This article is mainly on the use of jquery operation of the various methods of IFRAME detailed summary of the introduction, the need for friends can come to the reference, I hope to be helpful to everyone
IFrame is often used in composite documents, using jquery to manipulate the IFRAME can greatly improve efficiency, here are some basic operations DOM methods: The parent window operates iframe:window.frames["Iframeson". Document IFRAME Operation parent window: Window.parent.document jquery method: In the parent window, select all input boxes in the IFRAME: $ (window.frames["Iframeson"). Document). Find (": Text"); Action in IFRAME selects all input boxes in the parent window: $ (window.parent.document). Find (": Text"); The Html:<iframe src= of the IFRAME framework "test.html" id= "Iframeson" width= "700″height=" 300″frameborder= "0″scrolling=" Auto "></iframe> 1. Action in the parent window selects all radio buttons in the IFRAME $ (window.frames[" iframe1 "].document). Find (" input[@type = ' Radio '] "). attr (" Checked "," true "); 2. Operation in iframe Select all radio buttons $ (window.parent.document) in the parent window. Find ("input[@type = ' Radio ']"). attr ("Checked", "true"); IFRAME framework: <iframe src= "test.html" id= "iframe1″width=" 700″height= "300″frameborder=" 0″scrolling= "Auto" ></iframe> Code 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> &NBSP;<MCE: SCRIPT type= "Text/javascript" ><!-- $ (function () { &nbs p; $ ("#t1"). Hover (function () {alert (');}); //$ ("iframe"). Contents (). Find ("Body"). Append ("I ' m In a 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> collects several methods for obtaining elements in an IFRAME using jquery: $ (document.getElementById (' Iframeid '). contentWindow.document.body). htm () $ (document.getElementById (' Iframeid '). contentWindow.document.body). htm () Displays the contents of the BODY element in the IFRAME. $ ("#testId", Document.frames ("Iframename"). Document). HTML (); $ ("#testId", Document.frames ("Iframename"). Document). HTML (); According to IframenAME gets the id "TestID" element $ (window.frames["Iframename"].document). Find ("#testId"). HTML () $ (window.frames[ "Iframename"].document). Find ("#testId"). html () Functions ditto some examples of collecting online: using jquery to get the value of an element of a parent window in an IFRAME We have to use the DOM method and the jquery method to achieve the 1. Action in the parent window selects all radio buttons in the IFRAME $ (window.frames["iframe1"].document). Find ("input[@type = ' Radio ']). attr ("Checked", "true"); 2. Operation in iframe Select all radio buttons $ (window.parent.document) in the parent window. Find ("input[@type = ' Radio ']"). attr ("Checked", "true"); iframe frame: <iframe src= "test.html" id= "iframe1" width= "M" height= "$" frameborder= "0" scrolling= "Auto" ></iframe> IE7 test through using jquery operation iframe 1, content has two ifame <iframe id= "Leftiframe "...</iframe> <iframe id=" Mainiframe. </iframe> leftiframe jquery changes mainiframe src code: $ ("#mainframe", Parent.document.body). attr ("src" , "Http://www.jb51.net") 2, if the content has an ID of mainiframe ifame <iframe id= "Mainifame" ... ></ifame>The; ifame contains a someid <div id= "Someid" >you want to getting this content</div> gets the contents of Someid $ ( "#mainiframe"). Contents (). Find ("Someid"). html () HTML or $ ("#mainiframe"). Contains (). Find ("Someid"). Text () value 3 , action in the parent window selects all radio buttons in the IFRAME $ (window.frames["iframe1"].document). Find ("input[@type = ' Radio ']"). attr ("Checked", "true" ); The choice ID is still using Find method $ (window.frames["iframe1"].document). Find ("#id") 4, as shown above jquery operations in Leftiframe mainiframe content Someid content $ ("#mainframe", Parent.document.body). Contents (). Find ("Someid") . HTML () or $ ("#mainframe", Parent.document.body). Contents (). Find ("Someid"). Val () manipulating an IFRAME with JavaScript Mutual references between frames all frames in a page are provided as a collection as properties of the Window object, for example: Window.frames represents a collection of all the frames within the page, similar to the form objects, linked objects, picture objects, and so on, These collections are attributes of the document. Therefore, to refer to a child frame, you can use the following syntax: window.frames["FrameName"]; Window.frames.frameName Window.frames[index] the word "window" can also be replaced or omitted with self, assuming that FrameName is the first frame in the page, The following wording is equivalent: self.frames["FrameName"] Self.frames[0] Frames[0] framename Each frame corresponds to an HTML page, so this frame is also a standalone browser window, It has all the properties of the window, and the reference to the frame is the reference to the 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 page inside the frame, and so on. Below is a description of each of the different levels of the framework between the reference: 1. References to the parent frame to the child frame know the above principle, it is very easy to refer to the child frame from the parent frame, namely: window.frames["FrameName"]; This refers to a child frame named FrameName on the page. If you want to refer to a child frame within a child frame, the frame of reference is actually the property of the Window object: window.frames["FrameName"].frames["frameName2"]; This refers to a two-level child framework, and so on, you can implement a reference to a multi-tier framework. 2. A child frame to a parent frame each Window object has a parent property that represents its parental frame. If the frame is already a top-level frame, window.parent also represents the framework itself. 3. Brother Frame Reference If two frames are the same as the child frames of a frame, they are called sibling frameworks, they can be referenced through parent frameworks, such as a page that includes 2 sub frames: <frameset rows= "50%,50%" > <frame src= "1.html" name= "frame1"/> <frame src= "2.html" name= "frame2"/> </frameset& Gt in frame1 you can use the following statements to refer to frame2: self.parent.frames["frame2"]; 4. The level of mutual reference framework between different levels of framework is for the top-level framework. When the level is different, just know oneselfThe hierarchy and the name of the other frame, and the Window object properties referenced by the framework, make it easy to access each other, for example: self.parent.frames["ChildName"].frames[" Targetframename "]; 5. A reference to the top-level frame is similar to the parent property, and the Window object also has a top property. It represents a reference to the top-level framework, which can be used to determine whether a frame itself is a top-level frame, for example: //Determine if the frame is a top-level frame if (self==top) { //dosomething } & nbsp 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
