jquery operation of IFrame method _jquery

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

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

Example
Describe:
Find all text nodes and bold

Html

Copy Code code as follows:

<p>hello <a href= "johnhttp://ejohn.org/" >JOHN</A> how are
You doing?</p>

Jquery

Copy Code code as follows:

$ ("P"). Contents (). Not ("[nodetype=1]"). Wrap ("<b/>"); Results:
<p><b>Hello</b>
<a href= "johnhttp://ejohn.org/" >JOHN</A> <b>how are you
Doing?</b></p>

Describe:
Add some content to an empty frame

Html

Copy Code code as follows:

<iframe
Src= "/index-blank.html" width= "height=" ></iframe>

Jquery

Copy Code code as follows:

$ ("iframe"). Contents (). Find ("Body")
. Append ("I ' m in a iframe!");

Remove the boundary of the iframe frameborder= "0"

1 contains two ifame.

Copy Code code as follows:

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

Leftiframe jquery Changes the SRC code of the Mainiframe:

Copy Code code as follows:

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

2 If the content has an ID of mainiframe ifame

Copy Code code as follows:

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

Ifame contains a Someid

Copy Code code as follows:

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

Get the content of Someid

Copy Code code as follows:

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

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

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

jquery gets to the inside of the parent window that the iframe belongs to, the tag with ID Xuan.

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

JS the DOM operation problem of creating elements and appending them to elements in the iframe of the parent element:

Method of calling directly in the parent window in an IFRAME: Suppose the parent window has an Add method

Self.parent.add ();

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

The difference between IE and Firefox on the iframe Document object

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

Copy Code code as follows:

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

P.S.: If we want to get the window object for the IFRAME, not the document object, we can use the document.getElementById (ID). Contentwindow method. This allows us to use the Window object in the child window, such as a function in a child window.

Use the parent window's function in the child window to get the parent window Document Object

In the child window, we can get the window object of the parent windows through parent, if we have a function for getiframedom in the parent window, We can call it through parent.getiframedom, and we can use Parent.document to access the document object of the parent window in the child window.

Example of DOM operations using JavaScript for IFRAME

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

Copy Code code as follows:

<div id= "Phello" style= "margin:10px
auto;width:360px;height:30px; " > Here you can replace ~</div> with Iframeb JavaScript functions.
<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 child window A, b I put a p with the ID hello, so as to facilitate our DOM operation demo, the main HTML code of child window A and B is as follows:

Copy Code code as follows:

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

1, in the IFRAME, the parent window operates the DOM of the child window

Set up the parent window with the child window, so that we can in the parent window, through the following Iframea () function to the window a replacement p background color is red:

Copy Code code as follows:

Functioniframea () {//To child window A to change the background color with the ID hello
Vara=getiframedom ("Wiframea");
A.getelementbyid (' Hello '). style.background= "Red";
}
Functiongetiframedom (ID) {//compatible with IE, Firefox iframedom get function
Returndocument.getelementbyid (ID). contentdocument| | Document.frames[id].document;
}

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

In a child window, we can easily do the parent window DOM operation, only need to add the song parent object before the DOM operation of the method can be, such as: In the above child window B, we can use the following code, the parent window ID "Phello" to replace the content:

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

3, in the IFrame, child window A operation of the Dom of child window B

Since the child window can manipulate the Window object and the document object of the parent windows, the child window can also manipulate the DOM of the other child window. Broken bridge snow in child window B You can directly call 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:

Copy Code code as follows:

Vara=parent.getiframedom ("Wiframea");

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

The problem of automatic change of the height of an iframe I've been doing this for a long time, searching the internet for information, not very well, combining jquery (version 1.3.2), 4 lines of code, perfect compatibility ie, Firefox, Opera, Safari, Google
Chrome,js is as follows:

Copy Code code 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 parameters of the Heightset function can omit the
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 seems to have different meanings in various browsers, 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 especially much, but do not want to set every time, that dynamic change IFrame will not be able to achieve your code cleaning requirements, no way, or you will be out of the IFRAME. I can only say the general processing mode, after all, Ajax or dynamic forms in the general application of only a decimal proportion, after the asynchronous request only after the following:

JS Code

Copy Code code as follows:

Parent.window.heightSet ();