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 相关文章推荐
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 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
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python中对list去重的多种方法
2014/09/18 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python多进程共享变量
2016/04/06 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python中安装easy_install的方法
2018/11/18 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python的形参和实参使用方式
2019/12/24 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
python3.4中清屏的处理方法
2020/07/06 Python
用Python实现职工信息管理系统
2020/12/30 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
服务行业个人求职的自我评价
2013/12/12 职场文书
走进敬老院活动总结
2014/07/10 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
入党积极分子考察意见
2015/06/02 职场文书
小学思品教学反思
2016/02/20 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android