jquery method of operating iframe_jquery

Let’s first take a look at the help file for the object contents() in JQUERY

contents()
Overview
Find all child nodes (including text nodes) inside the matching element. If the element is an iframe, find the document content

Example
Description:
Find all text nodes and bold

HTML

Copy code The code is as follows:

Hello Johnhttp://ejohn.org/">John>, how are
you doing?

jQuery

Copy code The code is as follows:

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

Hello
Johnhttp://ejohn.org/">John>, how are you
doing?

Description:
Add some content to an empty frame

HTML

Copy code The code is as follows:

jQuery

Copy code The code is as follows:

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

Remove the iframe border frameborder="0"

1 There are two ifames in the content

Copy code The code is as follows:

jQuery in leftiframe changes the src code of mainiframe:

Copy code The code is as follows:

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

2 If there is an ifame with the ID of mainiframe in the content

Copy code The code is as follows:

In sub-windows A and B, I placed a P with the ID hello to facilitate our DOM operation demonstration. The main HTML codes of sub-windows A and B are as follows:

Copy code The code is as follows:

Hello World!

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

The parent window and the child window have been built, so that we can use the following iframeA() function in the parent window to change the background color of child window A to red:

Copy code The code is as follows:

functioniframeA(){//Change the background color of sub-window A with the ID hello
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.background="red";
}
functiongetIFrameDOM(id){//iframeDOM acquisition function compatible with IE and Firefox
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}

2. In an iframe, the child window operates the DOM of the parent window

In the child window, we can easily operate the parent window DOM. We only need to add the method of the Yige parent object before the DOM operation. For example: in the above child window B, we can use the following The code replaces the content with the ID "pHello" in the parent window:

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

3. In the iframe, sub-window A operates the DOM of sub-window 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~ Broken Bridge Canxue can directly use parent in child window B to directly call getIFrameDOM in the parent window. The function obtains the document object of sub-window A, so it is very simple to modify the content of sub-window A, such as the following code:

Copy code The code is as follows:

vara=parent.getIFrameDOM("wIframeA");

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

A problem with the automatic change of iframe height has bothered me for a long time. I searched for information on the Internet, but it was not very good. I combined it with jquery (version 1.3.2), which is just 4 lines of code. It is perfectly compatible with IE, Firefox, Opera, Safari, Google
Chrome, js is as follows:

Copy code The code 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 can replace 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;
}

Quote

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

Quote

They are all talking about an asynchronous problem. If you use ajax a lot, but don’t want to set it up every time, then dynamically changing the iframe will definitely not meet your code cleanliness requirements. There is no other way, or you can leave the iframe. . I can only talk about the general processing methods. After all, ajax or dynamic forms only account for a small proportion in general applications. After an asynchronous request, you only need to add:

at the end.

Js code

Copy code The code is as follows:

parent.window.heightSet();