首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery 操作iframe的几种方法总结

Posted in Javascript onDecember 13, 2013

iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，这里收集一些基本操作

DOM方法：
父窗口操作IFRAME：window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document

jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框： $(window.frames["iframeSon"].document).find(":text");
在IFRAME中操作 选中父窗口中的所有输入框：$(window.parent.document).find(":text");

iframe框架的HTML：<iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe框架的：
<iframe src="test.html" id="iframe1″ width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

 <HTML xmlns="http://www.w3.org/1999/xhtml">     
 <HEAD>          <MCE:SCRIPT mce_src="js/jquery-1.2.6.js" src="../js/jquery-1.2.6.js" type="text/ecmascript"></MCE:SCRIPT>     
     <MCE:SCRIPT type="text/javascript"><!--    
         $(function(){     
             $("#t1").hover(function(){alert('');});     
             //$("iframe").contents().find("body").append("I'm in an iframe!");      
             //$(window.frames["iframe1"].document).find("input[@type='text']").attr("size","30px");     
             //$("#iframe1").contents().find("#d1").css('color','red');     
             //$(window.frames["iframe1"].document).find("input[@name='t1']").css({background:"#369"});     
             //$("#iframe1").src("test.html");     
         });     
 // --></MCE:SCRIPT>     
 <DIV>     
 <INPUT id=t1>     
 <IFRAME id=iframe1 src="child.htm" mce_src="child.htm"></IFRAME>     
 <IFRAME height=100 src="child.htm" width=300 mce_src="child.htm"></IFRAME>     
 </DIV>     
 <DIV>     
 </DIV>    

收集利用Jquery取得iframe中元素的几种方法 :

$(document.getElementById('iframeId').contentWindow.document.body).htm() 
$(document.getElementById('iframeId').contentWindow.document.body).htm() 

显示iframe中body元素的内容。

$("#testId", document.frames("iframename").document).html(); 
$("#testId", document.frames("iframename").document).html(); 

根据iframename取得其中ID为"testId"元素

$(window.frames["iframeName"].document).find("#testId").html() 
$(window.frames["iframeName"].document).find("#testId").html() 

作用同上
收集网上的一些示例：

用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了

1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe框架的：<iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

IE7中测试通过

使用jquery操作iframe

1、内容里有两个ifame

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

leftiframe中jQuery改变mainiframe的src代码：
$("#mainframe",parent.document.body).attr("src","https://3water.com")

2、如果内容里面有一个ID为mainiframe的ifame
<iframe id="mainifame"...></ifame>
ifame包含一个someID
<div id="someID">you want to get this content</div>
得到someID的内容

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

3、在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

那选择id自然就是依然使用find方法
$(window.frames["iframe1"].document).find("#id")

4、如上面所示
leftiframe中的jQuery操作mainiframe的内容someID的内容
$("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()

使用JavaScript操纵iframe

框架间的互相引用

一个页面中的所有框架以集合的形式作为window 对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是 document的属性。因此，要引用一个子框架，可以使用如下语法：

window.frames["frameName"];

window.frames.frameName

window.frames[index]

其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的：

self.frames["frameName"]

self.frames[0]

frames[0]

frameName

每个框架都对应一个HTML页面，所以这个框架也是 一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面 进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。

下面分别介绍不同层次框架间的互相引用：

1．父框架到子框架的引用

知道了上述原理，从父框架引用子框架变的非常容易，即：

window.frames["frameName"];

这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：

window.frames["frameName"].frames["frameName2"];

这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。

2．子框架到父框架的引用

每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。

3．兄弟框架间的引用

如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：

<frameset rows="50%,50%">

<frame src="1.html" name="frame1" />

<frame src="2.html" name="frame2" />

</frameset>

在frame1中可以使用如下语句来引用frame2：

self.parent.frames["frame2"];

4．不同层次框架间的互相引用

框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：

self.parent.frames["childName"].frames["targetFrameName"];

5．对顶层框架的引用

和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

//判断本框架是否为顶层框架

if(self==top){

//dosomething

}

jquery 操作iframe的几种方法总结

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
JS猜数字游戏实例讲解
Jun 30 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 #Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 #Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 #Javascript
jquery如何获取复选框的值
Dec 12 #Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 #Javascript
jQuery的each终止或跳过示例代码
Dec 12 #Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 #Javascript
protocol(1) mysqldump(1) sentinel(1) Stater(1) minio(1) ACID(1) appdata(1) XPathParser(1) sock(2) Windows server 2003(1)
You might like
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP中header用法小结
2016/05/23 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
浅谈js原生拖放
2016/11/21 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
Python日期操作学习笔记
2008/10/07 Python
浅谈Python中函数的参数传递
2016/06/21 Python
详解python 注释、变量、类型
2018/08/10 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
利用python进行文件操作
2020/12/04 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
经理职责范文
2013/11/08 职场文书
求职信怎么写
2014/05/23 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Win11快速关闭所有广告推荐
2022/04/19 数码科技
Nginx安装配置详解
2022/06/25 Servers
MySQL存储过程及语法详解
2022/08/05 MySQL