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 27 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
js实现本地时间同步功能
Aug 26 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
Vue3中toRef与toRefs的区别
Mar 24 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
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
python中随机函数random用法实例
2015/04/30 Python
Python排序算法实例代码
2017/08/10 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
无犯罪记录证明范本
2014/09/15 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python
MySQL索引是啥?不懂就问
2021/07/21 MySQL
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
Python基本的内置数据类型及使用方法
2022/04/13 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python