jquery 操作iframe的几种方法总结


Posted in Javascript onDecember 13, 2013

iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作

DOM方法:
父窗口操作IFRAME:window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document

jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(":text");
在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).find(":text");

iframe框架的HTML:<iframe src="test.html" id="iframeSon" width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe框架的:
<iframe src="test.html" id="iframe1″ width="700″ height="300″ frameborder="0″ scrolling="auto"></iframe>

 <HTML xmlns="http://www.w3.org/1999/xhtml">     
 <HEAD>          <MCE:SCRIPT mce_src="js/jquery-1.2.6.js" src="../js/jquery-1.2.6.js" type="text/ecmascript"></MCE:SCRIPT>     
     <MCE:SCRIPT type="text/javascript"><!--    
         $(function(){     
             $("#t1").hover(function(){alert('');});     
             //$("iframe").contents().find("body").append("I'm in an iframe!");      
             //$(window.frames["iframe1"].document).find("input[@type='text']").attr("size","30px");     
             //$("#iframe1").contents().find("#d1").css('color','red');     
             //$(window.frames["iframe1"].document).find("input[@name='t1']").css({background:"#369"});     
             //$("#iframe1").src("test.html");     
         });     
 // --></MCE:SCRIPT>     
 <DIV>     
 <INPUT id=t1>     
 <IFRAME id=iframe1 src="child.htm" mce_src="child.htm"></IFRAME>     
 <IFRAME height=100 src="child.htm" width=300 mce_src="child.htm"></IFRAME>     
 </DIV>     
 <DIV>     
 </DIV>    

收集利用Jquery取得iframe中元素的几种方法 :

$(document.getElementById('iframeId').contentWindow.document.body).htm() 
$(document.getElementById('iframeId').contentWindow.document.body).htm() 

显示iframe中body元素的内容。

$("#testId", document.frames("iframename").document).html(); 
$("#testId", document.frames("iframename").document).html(); 

根据iframename取得其中ID为"testId"元素

$(window.frames["iframeName"].document).find("#testId").html() 
$(window.frames["iframeName"].document).find("#testId").html() 

作用同上
收集网上的一些示例:

用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了

1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe框架的:<iframe src="test.html" id="iframe1" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

IE7中测试通过

使用jquery操作iframe

1、内容里有两个ifame

<iframe id="leftiframe"...</iframe>
<iframe id="mainiframe..</iframe>

leftiframe中jQuery改变mainiframe的src代码:
$("#mainframe",parent.document.body).attr("src","https://3water.com")

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 日期分离成年月日的代码
May 14 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 #Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 #Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 #Javascript
jquery如何获取复选框的值
Dec 12 #Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 #Javascript
jQuery的each终止或跳过示例代码
Dec 12 #Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
python实现简单中文词频统计示例
2017/11/08 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python实现图片彩色转化为素描
2019/01/15 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
消防器材管理制度
2014/01/28 职场文书
五年级科学教学反思
2014/02/05 职场文书
支行行长岗位职责
2015/02/15 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android