How to operate iframe using jquery _ jquery

Source: Internet
Author: User
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 http://ejohn.org/"> John, how are
You doing?


JQuery

The Code is as follows:


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

Hello
Http://ejohn.org/"> 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 ();

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.