Detailed explanation of steps to operate iframe using jquery

This time I will give you a detailed explanation of the steps to use jquery to operate iframe. What are the precautions for using jquery to operate iframe? . The following is a practical case, let's take a look.

Let’s first take a look at the help file of 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

<p>Hello <a href="http://ejohn.org/">John</a>, how are 
you doing?</p>

jQuery

$("p").contents().not("[nodeType=1]").wrap("<b/>");结果:
<p><b>Hello</b> 
<a href="http://ejohn.org/">John</a>, <b>how are you 
doing?</b></p>

Description:
Add some content to an empty frame

HTML

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

jQuery

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

Remove the iframe border frameborder="0"

1 There are two ifame

<iframe id="leftiframe"...</iframe> 
<iframe id="mainiframe..</iframe>

jQuery changes in the leftiframe Mainiframe's src code:

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

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

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

ifame contains a someID

<p id="someID">you want to get this content</p>

Get the content of someID

$("#mainiframe").contents().find("someID").html()html 或者 
$("#mainiframe").contains().find("someID").text()值

2 As shown above
jQuery in leftiframe operates the content of mainiframe someID

$("#mainframe",parent.document.body).contents().find("someID").html()或者 
$("#mainframe",parent.document.body).contents().find("someID").val()

Jquery gets the tag with id xuan in the parent window to which the iframe belongs

$(window.parent.document).find("#xuan").html(x);//

//js creates elements and appends them to the dom operation problem in the element in the Iframe of the parent element:

Directly call the method in the parent window in the iframe: Assume that the parent window has an add method

self.parent.add();

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

The difference between IE and Firefox on iframe document objects

In IE6 and IE7, we can use document.frames[ID].document to access the document object in the iframe sub-window, but this is a writing method that does not comply with W3C standards and is also a unique method under IE. Under Firefox But it cannot be used. Firefox uses the document.getElementById(ID).contentDocument method that complies with the W3C standard. When I wrote the example today, I tested it through IE8. IE8 also uses the
document method that complies with the W3C standard. getElementById(ID).contentDocument method. So we can write a function that is common under IE and Firefox to get the iframe
document object—getIFrameDOM:

functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}

P.S.: If we want to get the iframe’s window object, instead of For document objects, you can use the method document.getElementById(ID).contentWindow. In this way, we can use the window object in the child window, such as the function in the child window.

Use the function of the parent window in the child window to obtain the document object of the parent window

In the child window, we can obtain the window object of the parent window through parent. If we are in the parent window There is a function called getIFrameDOM, which we can call through parent.getIFrameDOM. Similarly, we can use parent.document to access the document object of the parent window in the child window.

Using JavaScriptExample of DOM operation of iframe

First, we introduce two iframe child windows in the parent window, with IDs wIframeA and wIframeB, and the addresses are respectively : a.html, b.html.
The main HTML code of the parent window is as follows:

<p id="pHello" style="margin:10px 
auto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数，来替换哦~</p> 
<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 sub-windows A and B, I put a P with the ID hello to facilitate our DOM operation demonstration. The main HTML of sub-windows A and B The code is as follows:

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

1. In the 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 to change the background color of sub-window A to red:

functioniframeA(){//给子窗口A改变ID为hello的背景色
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.
background
="red";
}
functiongetIFrameDOM(id){//兼容IE、Firefox的iframeDOM获取函数
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}

2. In the iframe, the sub-window operates the DOM of the parent window

In the sub-window, we can conveniently To perform parent window DOM operations, you only need to add the method of the Yige parent object before the DOM operation. For example: in the child window B above, we can use the following code to add the parent window with the ID "pHello" Replace the content:

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

3. In the iframe, sub-window A operates on sub-window B. DOM

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 the parent The getIFrameDOM function in the window 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:

vara=parent.getIFrameDOM("wIframeA");

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

一个iframe高度自动变化的问题搞了我半天，网上找了下资料，不是很好，结合了一下jquery(版本1.3.2)，4行代码即可，完美兼容IE、Firefox、Opera、Safari、Google
Chrome,js如下:

function  heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}else{
          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//这行可代替上一行，这样heightSet
函数的参数
可以省略了
          //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>

引用

this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用

都在说一个异步的问题，如果你ajax用得特别多,但又不想每次都去设置，那动态改变iframe肯定达不到你的代码清洁要求，没办法，要么你就脱离iframe。我只能说说一般处理方式，毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

Js代码

parent.window.heightSet();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery遍历筛选数组与json对象的方法合集

jquery从数组移除选中值步骤详解

The above is the detailed content of Detailed explanation of steps to operate iframe using jquery. For more information, please follow other related articles on the PHP Chinese website!