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 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 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爆绝对路径方法收集整理
2012/09/17 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
json 定义
2008/06/10 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
微信小程序url传参写变量的方法
2018/08/09 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
Python中__name__的使用实例
2015/04/14 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
公司董事长职责
2013/12/12 职场文书
关于迟到的检讨书
2014/01/26 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
人事局接收函
2015/01/30 职场文书
作弊检讨书范文
2015/05/06 职场文书
教师网络培训心得体会
2016/01/09 职场文书