Several methods of operating the IFRAME in jquery

Source: Internet
Author: User
Tags html page

  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= "" >       <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 () {  &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://")   2, if the content has an ID of mainiframe ifame  <iframe id= "Mainifame" ... ></ifame&gtThe;  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  
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.