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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
js实现页面图片消除效果
Mar 24 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
简单了解python的break、continue、pass
2019/07/08 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
Python csv文件记录流程代码解析
2020/07/16 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
水果连锁超市创业计划书
2014/01/24 职场文书
网页美工求职信范文
2014/04/17 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
导游词之张家界
2019/10/31 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS