解析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 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
详解vue 组件
Jun 11 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实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python并发:多线程与多进程的详解
2019/01/24 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
体育教师自荐信范文
2013/12/16 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
个人党性分析总结
2015/03/05 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers