jquery method of operating iframe_jquery-JS Tutorial-php.cn

jquery method of operating iframe_jquery

WBOY

Release： 2016-05-16 16:29:23

Original

1446 people have browsed it

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:

src="/index-blank.html" width="300" height="100">

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:

<br> <iframe id="mainiframe..

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:

</ifame> <br> </div> <p>ifame contains a someID</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="96123" class="copybut" id="copybut96123" onclick="doCopy('code96123')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code96123"> <br> <div id="someID">you want to get this content</div> <br> </div> <p>Get the content of someID</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="63011" class="copybut" id="copybut63011" onclick="doCopy('code63011')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code63011"> <br> $("#mainiframe").contents().find("someID").html()html or <br> $("#mainiframe").contains().find("someID").text() value<br> </div> <p>2 as shown above <br> jQuery in leftiframe operates the content of mainiframe and the content of someID </p> <p>$("#mainframe",parent.document.body).contents().find("someID").html() or <br> $("#mainframe",parent.document.body).contents().find("someID").val()</p> <p>Jquery gets the tag with id xuan in the parent window to which the iframe belongs </p> <p>$(window.parent.document).find("#xuan").html(x);//</p> <p>//JS creates an element and appends it to the Iframe of the parent element. DOM operation problem in the element: </p> <p> Directly call the method in the parent window in the iframe: Assume that the parent window has an add method </p> <p>self.parent.add();</p> <p>================================================== ================</p> <p>Differences in iframe document objects between IE and Firefox</p> <p>In IE6 and IE7, we can use document.frames[ID].document to access the document object in the iframe sub-window. However, this is a writing method that does not comply with W3C standards and is also a unique method under IE. In Firefox But it cannot be used under Firefox. The document.getElementById(ID).contentDocument method that complies with the W3C standard is used under Firefox. When I wrote the example today, I tested it through IE8. IE8 also uses the method that complies with the W3C standard <br> document.getElementById(ID).contentDocument method. So we can write a universal way to get iframe under IE and Firefox <br> Function of document object—getIFrameDOM: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="62348" class="copybut" id="copybut62348" onclick="doCopy('code62348')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code62348"> <br> functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}<br> </div> <p>P.S.: If we want to get the window object of the iframe instead of the document object, we can use the document.getElementById(ID).contentWindow method. In this way, we can use the window object in the child window, such as the functions in the child window. </p> <p>Use the function of the parent window in the child window to obtain the document object of the parent window</p> <p>In the child window, we can get the window object of the parent window through parent. If we have a function called getIFrameDOM in the parent window, we can call it through parent.getIFrameDOM. In the same way, we can use parent.document. The document object of the parent window can be accessed in the child window. </p> <p>Example of DOM manipulation of iframe using JavaScript</p> <p>First, we introduce two iframe sub-windows in the parent window, with IDs wIframeA and wIframeB, and addresses: a.html and b.html respectively. <br> The main HTML code of the parent window is as follows: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="37781" class="copybut" id="copybut37781" onclick="doCopy('code37781')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code37781"> <br> <div id="pHello" style="margin:10px <br /> auto;width:360px;height:30px;">This can be replaced by the JavaScript function of iframeB~</div> <br> <iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" <br /> frameborder="0"> src="b.html" scrolling="no" frameborder="0">

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();