jquery iframe操作详细解析


Posted in Javascript onNovember 20, 2013

使用jquery操作iframe

1、 内容里有两个ifame

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

leftiframe中jQuery改变mainiframe的src代码:
$("#mainframe",parent.document.body).attr("src","http://www.radys.cn")

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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
小程序实现侧滑删除功能
Jun 25 Javascript
JS获取当前日期和时间的简单实例
Nov 19 #Javascript
js 自动播放的实例代码
Nov 19 #Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 #Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 #Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 #Javascript
详解jQuery插件开发中的extend方法
Nov 19 #Javascript
Js 导出table内容到Excel的简单实例
Nov 19 #Javascript
You might like
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
javascript 写类方式之八
2009/07/05 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
js如何验证密码强度
2020/03/18 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
详解Python打包分发工具setuptools
2019/08/05 Python
python中加背景音乐如何操作
2020/07/19 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
体育老师的教学自我评价分享
2013/11/19 职场文书
医学专业毕业生个人的求职信
2013/12/04 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
出纳员的岗位职责
2014/02/22 职场文书
父母寄语大全
2014/04/12 职场文书
教师师德演讲稿
2014/05/06 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL