解析Jquery取得iframe中元素的几种方法


Posted in Javascript onJuly 04, 2013

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

显示iframe中body元素的内容。
$("#testId", document.frames("iframename").document).html();

根据iframename取得其中ID为"testId"元素
$(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
}

Javascript 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
js原型链原理看图说明
Jul 07 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
node.js通过url读取文件
Oct 16 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 #Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 #Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 #Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 #Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 #Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 #Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 #Javascript
You might like
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python实现xlsx文件分析详解
2018/01/02 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Keras自定义IOU方式
2020/06/10 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
婚礼答谢词
2015/01/04 职场文书
入党个人总结范文
2015/03/02 职场文书
中标通知书
2015/04/17 职场文书
经营场所证明范本
2015/06/19 职场文书
旅游投诉信范文
2015/07/02 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
企业文化学习心得体会
2016/01/21 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript