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+xml自动生成表格的东西
Dec 21 Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
javascript正则表达式总结
Feb 29 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python 函数中的参数类型
2020/02/11 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
求职简历自我评价范例
2014/03/12 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
欢迎家长标语
2014/10/08 职场文书
工作检讨书大全
2015/01/26 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
贷款收入证明格式
2015/06/24 职场文书
大学班干部竞选稿
2015/11/20 职场文书
优秀创业计划书分享
2019/07/19 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android