The operation of IFRAME in jquery

Let's take a look at the Help file for contents () in jquery

Contents ()
Overview
Finds all child nodes (including text nodes) within a matching element. If the element is an IFRAME, find the document content


Example
Describe:
Find all text nodes and bold

Html
Code:
<p>hello <a href= "http://ejohn.org/" &GT;JOHN&LT;/A&GT;
You doing?</p>jquery
Code:
$ ("P"). Contents (). Not ("[nodetype=1]"). Wrap ("<b/>"); Results:
<p><b>Hello</b>
<a href= "http://ejohn.org/" &GT;JOHN&LT;/A&GT;, <b>how is You
Doing?</b></p> Description:
Add some content to an empty frame

HTML Code:
<iframe
Src= "/index-blank.html" width= "height=" ></iframe>jquery
Code:
$ ("iframe"). Contents (). Find ("Body")
. Append ("I ' m in an iframe!");

Remove the boundary of the iframe frameborder= "0"

1 of the contents are two ifame.

<iframe id= "Leftiframe" ...</iframe>
<iframe
Id= "Mainiframe. </iframe>

Leftiframe in jquery changes the SRC code of Mainiframe:

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

2 If there is a ifame with ID mainiframe in the content
<iframe
Id= "Mainifame" ...></ifame>
Ifame contains a Someid
<div
Id= "Someid" >you want to get this content</div>
Get Someid's content

$ ("#mainiframe"). Contents (). Find ("Someid"). html () HTML or
$ ("#mainiframe"). Contains (). Find ("Someid"). Text () value

2 as shown above
Leftiframe in jquery operations Mainiframe content Someid content

$ ("#mainframe", Parent.document.body). Contents (). Find ("Someid"). HTML () or
$ ("#mainframe", Parent.document.body). Contents (). Find ("Someid"). Val ()

jquery Gets the label of the ID of the Xuan inside the parent window to which the IFRAME belongs

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

JS creates the element and appends the DOM operation problem to the element in the parent element's IFRAME:

See Links: http://www.cssrain.cn/?p=1376

The method in the parent window is called directly in the IFRAME: Assume that the parent window has an Add method

Self.parent.add ();

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

IE and the Firefox the iframe Document the difference of objects

In IE6, IE7, we can use Document.frames[id].document to access the Document object in the IFrame Subwindow, but this is not in line with the standard of the writing, is also the unique method under IE, It is not available under Firefox, and Firefox uses the document.getElementById (ID) in accordance with the standard. Contentdocument method, today I write an instance, through IE8 test, IE8 is also used in accordance with the standards of the
document.getElementById (ID). Contentdocument method. So we can write a common access iframe under IE and Firefox.
The function of the Document object-getiframedom:

Functiongetiframedom (ID) {Returndocument.getelementbyid (id). contentdocument| | Document.frames[id].document;}

P.S.: If we want to get the window object of an IFRAME instead of the document object, you can use document.getElementById (ID). Contentwindow method. This allows us to use the Window object in the Subwindow, such as a function in a subwindow.

A function that uses the parent window in a child window to get the parent window Document Object

In the Subwindow, we can get the window object of the parent windows through the parents, if we have a function of getiframedom in the parent window, We can call it through parent.getiframedom, so we can access the document object of the parent window in the child window using Parent.document.

Use JavaScript make iframe of the DOM Operation Example

First, we introduce two IFRAME child windows in the parent window, the IDs are Wiframea, WIFRAMEB, respectively: a.html, b.html.
The main HTML code for the parent window is as follows:

<div id= "Phello" style= "margin:10px
auto;width:360px;height:30px; " > here can be replaced by Iframeb's JavaScript function, OH ~</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 the Subwindow A, b I put an ID of Hello p, to facilitate our DOM operation demonstration, sub Windows A, B's main HTML code is as follows:

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

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

The parent window and the child window are built so that we can change the background color of p by the following Iframea () function in the parent window to red:

Functioniframea () {//change the background color vara=getiframedom ("Wiframea") of the ID for Hello to child window A, A.getelementbyid (' Hello '). Style.background= "Red";} Functiongetiframedom (ID) {//compatible with IE, Firefox's iframe
Dom Gets the function Returndocument.getelementbyid (ID). contentdocument| | Document.frames[id].document;}

2. In the IFRAME, the child window operates the DOM of the parent window

In the child window, we can easily do the parent window DOM operation, just need to add the parent object before the DOM operation method is OK, such as: In the above sub-window B, we can use the following code, the parent window in the id "Phello" the content to replace:

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

3. In the IFRAME, Subwindow a operates the DOM of sub window B

Now that the child window can manipulate the Window object and the document object of the parent, the child window can also manipulate the DOM of the other child window ~ Broken Bridge in child window B, you can directly invoke the Getiframedom function in the parent window to get the Document object of child window A, so it is easy to modify the contents of child window A, such as the following code:

Vara=parent.getiframedom ("Wiframea");

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

An iframe height auto-change problem I have a half-day, online find the next information, not very good, combined with a bit of jquery (version 1.3.2), 4 lines of code, perfect compatibility with IE, Firefox, Opera, Safari, Google
Chrome,js 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 can be substituted for the previous line, so that the parameters of the Heightset function 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

This keyword appears to have different meanings in various browsers, and FF and IE must get the internal page height through the name of the IFRAME, while other browsers can use this or ID

Reference

Are talking about an asynchronous problem, if you use Ajax very much, but do not want to set up every time, that dynamic change IFrame will not reach your code cleaning requirements, no way, or you will be out of the IFRAME. I can only talk about the general approach, after all, Ajax or dynamic forms in the general application only a fractional proportion, the asynchronous request only after adding:

JS Code

Parent.window.heightSet ();

The operation of IFRAME in jquery