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 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 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
第七节 类的静态成员 [7]
2006/10/09 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
php里array_work用法实例分析
2015/07/13 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
js类 from qq
2006/11/13 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
python自动裁剪图像代码分享
2017/11/25 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python 阶乘累加和的实例
2019/02/01 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
Python中的面向接口编程示例详解
2021/01/17 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
生产部统计员岗位职责
2014/01/05 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
员工工作表扬信
2015/05/05 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python
Golang 对es的操作实例
2022/04/20 Golang