频道导航

jquery操作 iframe的方法

2018-12-30 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jquery操作 iframe的方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_502_0@我们先看一下 JQUERY中的对像 contents()　的帮助文件

@H_502_0@contents()
概述
查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

@H_5020@
示例
描述:
查找所有文本节点并加粗

@H502_0@HTML
<div class="codetitle"><a style="CURSOR: pointer" data="45817" class="copybut" id="copybut45817" onclick="doCopy('code45817')"> 代码如下:

<div class="codebody" id="code45817">
@H_502_0@Hello <a href="John</a">http://ejohn.org/">John</a>,how are
you doing?

@H_502_0@jQuery

代码如下:

");结果: @H_502_0@Hello John>,how are you doing?

@H_502_0@描述: 往一个空框架中加些内容

@H_502_0@HTML

代码如下:

@H_502_0@jQuery

代码如下:

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

@H_502_0@去掉iframe 的边界 frameborder="0"

@H_502_0@1 内容里有两个ifame

@H_502_0@

代码如下:

 
502</a>_0@leftiframe中jQuery改变mainiframe的src<a href="/tag/daima/" target="_blank" class="keywords">代码</a>： 
<div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="18709" class="copybut" id="copybut18709" onclick="doCopy('code18709')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code18709"&gt;
$("#mainframe",parent.document.body).attr("src","<a href="http://www.baidu.com"&gt;http://www.baidu.com</a>")
</div></p>
<p>2 如果内容里面有一个ID为mainiframe的ifame</p>
<p><div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="45412" class="copybut" id="copybut45412" onclick="doCopy('code45412')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code45412"&gt;
<iframe id="mainifame"...></ifame> 
</div></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@ifame包含一个someID</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@<div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="65302" class="copybut" id="copybut65302" onclick="doCopy('code65302')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code65302"&gt;
<div id="someID"&gt;you want to get this content</div> 
</div></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@得到someID的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@<div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="32190" class="copybut" id="copybut32190" onclick="doCopy('code32190')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code32190"&gt;
$("#mainiframe").contents().find("someID").html()html 或者 
$("#mainiframe").contains().find("someID").text()值
</div></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@2 如上面所示 
leftiframe中的jQuery操作mainiframe的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>someID的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@$("#mainframe",parent.document.body).contents().find("someID").html()或者 
$("#mainframe",parent.document.body).contents().find("someID").val()</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@Jquery<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>到 iframe 所属的父窗口的里面的id为xuan的 <a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>的</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@$(window.parent.document).find("#xuan").html(x);//</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@//js创建 元素 并追加到 父元素的 Iframe中的 元素中的dom操作问题：</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@iframe中直接<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>父窗口中的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>：假设父窗口有个add的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@self.parent.add();</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@===============================================================</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@IE和Firefox对iframe document对象的差异性</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@在IE6、IE7中，我们可以使用document.frames[ID].document来访问iframe子窗口中的document对象，可是这是不符合W3C标准的写法，也是IE下独有的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，在Firefox下却不可以使用，Firefox下使用的是符合W3C标准的document.getElementById(ID).contentDocument<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>，今天我在写实例的时候，通过IE8进行测试，IE8也是使用的符合W3C标准的 
document.getElementById(ID).contentDocument <a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>。所以我们可以写一个在IE和Firefox下通用的<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>iframe 
document对象的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>—getIFrameDOM：</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@<div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="31526" class="copybut" id="copybut31526" onclick="doCopy('code31526')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code31526"&gt;
functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}
</div></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@P.S.:如果我们要<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>iframe的window对象，而不是document对象，可以使用document.getElementById(ID).contentWindow的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>。这样我们就可以使用子窗口中的window对象了，比如子窗口中的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>。</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@在子窗口使用父窗口的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>父窗口document对象</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@在子窗口中，我们可以通过parent就可以获得父窗口的window对象，如果假如我们在父窗口有一个<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>为getIFrameDOM，我们可以通过parent.getIFrameDOM来<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>，同理我们使用parent.document就可以在子窗口中访问父窗口的document对象了。</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@使用JavaScript进行iframe的DOM操作实例</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@首先，我们在父窗口中引入两个iframe子窗口，ID分别为wIframeA、wIframeB，地址分别为：a.html、b.html。
父窗口主要<a href="/tag/HTMLdaima/" target="_blank" class="keywords">HTML代码</a>如下：</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@<div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="6959" class="copybut" id="copybut6959" onclick="doCopy('code6959')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code6959"&gt;
<div id="pHello" style="margin:10px 
auto;width:360px;height:30px;"&gt;此处可通过iframeB的JavaScript<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，来替换哦~</div> 
<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" 
frameborder="0"&gt; 
</div>
<p>在子窗口A、B中我放了一个ID为hello的P，以方便我们进行DOM操作演示，子窗口A、B的主要<a href="/tag/HTMLdaima/" target="_blank" class="keywords">HTML代码</a>如下：</p><br />
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@&lt;div class="codetitle"&gt;<span>&lt;a style="CURSOR: pointer" data="80661" class="copybut" id="copybut80661" onclick="doCopy('code80661')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div>&lt;div class="codebody" id="code80661"&gt;<br />
&lt;p id="hello"&gt;Hello World!</p></p>
</div></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@1、在iframe中，父窗口操作子窗口的DOM</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@建好了父窗口跟子窗口，这样我们可以在父窗口中，通过以下iframeA()<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>来把子窗口A更换P的背景颜色为红色：</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@<div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="32999" class="copybut" id="copybut32999" onclick="doCopy('code32999')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code32999"&gt;
functioniframeA(){//给子窗口A改变ID为hello的背景色
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.background="red";
}
functiongetIFrameDOM(id){//兼容IE、Firefox的iframeDOM<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}
</div></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@2、在iframe中，子窗口操作父窗口的DOM</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@在子窗口中，我们可以方便的进行父窗口DOM操作，只需要在DOM操作之前<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>亦歌parent对象的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>就可以啦，如：在上面的子窗口B中，我们可以使用下面的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>把，父窗口中ID为“pHello”的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>给替换掉:</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@-------------------</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@3、在iframe中，子窗口A操作子窗口B的DOM</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@既然子窗口可以操作父窗口的window对象和document对象，那么子窗口也可以操作另外的子窗口的DOM啦~断桥残雪在子窗口B中可以直接使用parent直接<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>父窗口中的getIFrameDOM<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>获得子窗口A的document对象，这样要<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>子窗口A的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>就很简单啦，如以下的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>：</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@<div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="75984" class="copybut" id="copybut75984" onclick="doCopy('code75984')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code75984"&gt;
vara=parent.getIFrameDOM("wIframeA");
</div></p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@===================================================================================</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@一个iframe高度<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>变化的问题搞了我半天，网上找了下资料，不是很好，结合了一下jquery(版本1.3.2)，4行<a href="/tag/daima/" target="_blank" class="keywords">代码</a>即可，完美兼容IE、Firefox、Opera、Safari、Google 
Chrome,js如下:</p>
@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_0@<div class="codetitle"&gt;<span><a style="CURSOR: pointer" data="146" class="copybut" id="copybut146" onclick="doCopy('code146')"&gt;<U></U></a> <a href="/tag/daima/" target="_blank" class="keywords">代码</a>如下:</div><div class="codebody" id="code146"&gt;
function heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
 bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}else{
 bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//这行可代替上一行，这样heightSet<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>的参数可以省略了
 //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)"&gt;

@H_502_0@引用

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

@H_502_0@引用

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

@H_502_0@Js代码

代码如下:

iframe iframe jquery