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 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
javascript对象的创建和访问
Mar 08 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
js返回顶部实例分享
2016/12/21 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
实例讲解python中的协程
2018/10/08 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
计划生育责任书
2015/05/09 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python