How to operate iframe using jquery _ jquery

This article mainly introduces jquery's iframe operation method. If you need it, you can refer to the Help file for contents () in JQUERY.

Contents ()
Overview
Search for all child nodes (including text nodes) within the matching element ). If the element is an iframe, search for the document content

Example
Description:
Search for all text nodes and bold them

HTML

The Code is as follows:

Hello John, how are
You doing?

JQuery

The Code is as follows:

$ ("P"). contents (). not ("[nodeType = 1]"). wrap (""); Result:

Hello
John,How are you
Doing?

Description:
Add some content to an empty frame

HTML

The Code is as follows:

JQuery

The Code is as follows:

$ ("Iframe"). contents (). find ("body ")
. Append ("I'm in an iframe! ");

Remove the iframe boundary frameborder = "0"

1 contains two ifame

The Code is as follows:

In leftiframe, jQuery changes the src code of mainiframe:

The Code is as follows:

$ ("# Mainframe", parent.doc ument. body). attr ("src", "http://www.baidu.com ")

2. If the content contains an ifame with the ID of mainiframe

The Code is as follows:

In subwindows A and B, I put a p with the ID of hello to facilitate DOM operation demonstration. The main HTML code of subwindows A and B is as follows:

The Code is as follows:

Hello World!

1. in iframe, the parent window operates the DOM of the Child Window

After creating the parent window and child window, we can use the following iframeA () function in the parent window to change the background color of Child Window A to Red:

The Code is as follows:

FunctioniframeA () {// change the background color of subwindow A whose ID is hello.
Vara = getIFrameDOM ("wIframeA ");
A. getElementById ('hello'). style. background = "red ";
}
FunctiongetIFrameDOM (id) {// This function is compatible with iframeDOM of IE and Firefox.
Returndocument. getElementById (id). contentDocument | document.frames?id=.doc ument;
}

2. in iframe, the Child Window operates the DOM of the parent window

In the sub-window, we can easily perform DOM operations on the parent window. You only need to add the parent object method before DOM operations, for example, in subwindow B above, we can use the following code to replace the content with "pHello" in the parent window:

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

3. In iframe, subwindow A operates the DOM of subwindow B.

Since the child window can operate the window object and document Object of the parent window, the Child window can also operate the DOM of another child window ~ In sub-window B, you can directly use parent to directly call the getIFrameDOM function in the parent window to obtain the document object of sub-window A. This makes it easy to modify the content of sub-window, see the following code:

The Code is as follows:

Vara = parent. getIFrameDOM ("wIframeA ");

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

I had a problem with the automatic change of iframe for half a day. I found some information on the Internet, which is not very good. I combined jquery (Version 1.3.2) with four lines of code, perfect compatibility with IE, Firefox, Opera, Safari, and Google
Chrome and js are as follows:

The Code is as follows:

Function heightSet (thisFrame ){
If ($. browser. mozilla | $. browser. msie ){
BodyHeight = window. frames ["thisFrameName" 2.16.doc ument. body. scrollHeight;
} Else {
BodyHeight extends thisframe.content?document.doc umentElement. scrollHeight;
// This line can replace the previous line, so that the parameters of the heightSet function can be omitted.
// BodyHeight = document. getElementById ("thisFrameId" ).content?document.doc umentElement. scrollHeight;
}
Document. getElementById ("thisFrameId"). height = bodyHeight;
}

Reference

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

Reference

I am talking about an asynchronous problem. If you use a lot of ajax, but you don't want to set it every time, the dynamic change of iframe will certainly not meet your code cleaning requirements. No way, or you can leave iframe. I can only talk about the general processing method. After all, ajax or dynamic forms only occupy the fractional proportion in general applications. After an asynchronous request, you only need to add the following:

Js Code

The Code is as follows:

Parent. window. heightSet ();