Jquery operates on methods of iframe

Let's take a look at JQUERY's help file for things like contents()

Contents ()
An overview of the
Find all child nodes (including text nodes) inside the matching element. If the element is an iframe, find the document content

The sample
Description:
Find all the text nodes and bold them

HTML

<p>Hello <a href="http://ejohn.org/">John</a>, how are 

you doing?</p>

jQuery

$("p").contents().not("[nodeType=1]").wrap("<b/>"); The results of :

<p><b>Hello</b> 

<a href="http://ejohn.org/">John</a>, <b>how are you 

doing?</b></p>

Description:
Add something to an empty frame

HTML

<iframe 

src="/index-blank.html" width="300" height="100"></iframe>

jQuery

$("iframe").contents().find("body")

.append("I'm in an iframe!");

 

Remove the border of the iframe ="0"

There are two ifame in content 1

<iframe id="leftiframe"...</iframe> 

<iframe id="mainiframe..</iframe>

JQuery in leftiframe changes the SRC code of mainiframe:

$("#mainframe",parent.document.body).attr("src","http://www.baidu.com")

2 if the content contains an ifame with the ID mainiframe

<iframe id="mainifame"...></ifame> 

Ifame contains a someID

<div id="someID">you want to get this content</div> 

Get the content of someID

$("#mainiframe").contents().find("someID").html()html  or  

$("#mainiframe").contains().find("someID").text() value 

2 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 () or
$(" # mainframe ", the parent. The document. The body). The contents (.), find (" someID "). Val ()

Jquery gets the tag with the id xuan in the parent window to which the iframe belongs

$(window. The parent. The document). The find (" # xuan ".) (x) HTML; //

//js creates the element and appends it to the element in the Iframe of the parent element.

The method in the parent window is called directly from the iframe: suppose the parent window has an add method

The self. The parent. The add ();

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Differences between IE and Firefox on iframe document objects

In IE6 and IE7, we can use document.frames[ID]. Document to access the document object in the iframe sub-window. However, this is not a W3C standard writing method, and it is a unique method under IE, but it cannot be used in Firefox. IE8 is also used to comply with W3C standards
Document. The getElementById (ID). ContentDocument method. So we can write a get iframe that is common under IE and Firefox
Document object function - getIFrameDOM:

functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}

P.S.: if we want to get the iframe window object instead of the document object, we can use the method document.getelementbyid (ID).contentwindow. This allows us to use the window object in the child window, such as the function in the child window.

Use the function of the parent window in the child window to get the parent window document object

In the child window, we can get the window object of the parent window through parent. If we have a function getIFrameDOM in the parent window, we can call it through parent.getiframedom.

Use JavaScript for DOM manipulation of iframe instances

First, we introduce two iframe child Windows in the parent window, ID is wIframeA, wIframeB, address is a.html, b.html.
The main HTML code of the parent window is as follows:

<div id="pHello" style="margin:10px 

auto;width:360px;height:30px;"> Here through iframeB the JavaScript Delta function, let's replace it ~</div> 

<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" 

frameborder="0"></iframe> <iframe id="wIframeB" name="myiframeB" 

src="b.html" scrolling="no" frameborder="0"></iframe>

 
In sub-windows A and B, I put A P with ID of hello to facilitate our DOM manipulation demonstration. The main HTML code of sub-windows A and B is as follows:

<p id="hello">Hello World!</p>

1. In the iframe, the parent window manipulates the DOM of the child window

Parent window and child window are built so that we can change the background color of child window A to red by using the following iframeA() function in the parent window:

functioniframeA(){//Change the background color 
 for child window A with ID of hello
vara=getIFrameDOM("wIframeA");

a.getElementById('hello').style.background="red";

}

functiongetIFrameDOM(id){//IframeDOM 
, which is compatible with IE and Firefox
returndocument.getElementById(id).contentDocument||document.frames[id].document;

}

2. In the iframe, the child window manipulates the DOM of the parent window

In the child window, we can easily conduct DOM operation of the parent window, just need to add the method of yiguo parent object before DOM operation, for example: in the above child window B, we can use the following code to replace the content with ID of "pHello" in the parent window:

-------------------

3. In the iframe, the child window A manipulates the DOM of the child window B

Since child window can operate on the parent window object of the window and document objects, so can A child Windows operating other child window DOM ~ middle-east cx can be used directly in the child window B parent called directly in the parent window getIFrameDOM function get A child window. A document object, so to change the content of the child window. A very simple, such as the following code:

vara=parent.getIFrameDOM("wIframeA");

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

An iframe height auto-change problem caused me a long time, and I found some information on the Internet, which was not very good. I combined jquery(version 1.3.2) with 4 lines of code, which is perfectly compatible with IE, Firefox, Opera, Safari and Google
Chrome, js is as follows:

function  heightSet(thisFrame){

if($.browser.mozilla || $.browser.msie){

          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;

}else{

          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;

//This line replaces the previous line, so that the heightSet function arguments can be omitted 

          //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;

}

       document.getElementById("thisFrameId").height=bodyHeight;  

}

<iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src=""onload="heightSet(this)"></iframe>

reference

The this keyword seems to have different meanings in various browsers,FF and IE must use the iframe name to get the internal page height, while other browsers can use this or ID

reference

It's all about asynchrony. If you use ajax a lot, but you don't want to set it up every time, then dynamically changing the iframe won't clean up your code. I can only talk about the general processing, after all, ajax or dynamic form is only a small percentage in the general application, after the asynchronous request just need to add:

Js code

parent.window.heightSet();