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获取当前日期和时间的简单实例
Nov 19 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
vue组件横向树实现代码
Aug 02 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
个人小程序接入支付解决方案
May 23 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
python基础知识小结之集合
2015/11/25 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
聊聊python中的循环遍历
2020/09/07 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
大四自我鉴定范文
2013/10/06 职场文书
美术教师自我鉴定
2014/02/12 职场文书
环境工程专业自荐信
2014/03/03 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
党性分析自查总结
2014/10/14 职场文书
行政上诉状范文
2015/05/23 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript