js操作iframe的一些方法介绍


Posted in Javascript onJune 25, 2013

1. 获得iframe的window对象
存在跨域访问限制。

chrome:iframeElement. contentWindow
firefox: iframeElement.contentWindow
ie6:iframeElement.contentWindow

文章Iframes, onload, and document.domain中说“he iframe element object has a property called contentDocument that contains the iframe's document object, so you can use the parentWindow property to retrieve the window object.”意思就是一些浏览器可以通过iframeElement.contentDocument.parentWindow获得iframe的window对象。但经过测试firefox、chrome的element.contentDocument对象没有parentWindow属性。

(javascript)

function getIframeWindow(element){         
    return  element.contentWindow;   
    //return  element.contentWindow || element.contentDocument.parentWindow;   
} 

2. 获得iframe的document对象
存在跨域访问限制。

chrome:iframeElement.contentDocument
firefox:iframeElement.contentDocument
ie:element.contentWindow.document
备注:ie没有iframeElement.contentDocument属性。

(javascript)

var getIframeDocument = function(element) {   
    return  element.contentDocument || element.contentWindow.document;   
};  

3. iframe中获得父页面的window对象
存在跨域访问限制。

父页面:window.parent
顶层页面:window.top
适用于所有浏览器

4. 获得iframe在父页面中的html标签
存在跨域访问限制。

window.frameElement(类型:HTMLElement),适用于所有浏览器

5. iframe的onload事件
非ie浏览器都提供了onload事件。例如下面代码在ie中是不会有弹出框的。

(javascript)

var ifr = document.createElement('iframe');   
ifr.src = 'https://3water.com/index.php';   
ifr.onload = function() {   
    alert('loaded');   
};   
document.body.appendChild(ifr);  

但是ie却又似乎提供了onload事件,下面两种方法都会触发onload

方法一:

<iframe  onload="alert('loaded');"  src="https://3water.com/index.php"></iframe>   
 
 
方法二:  
//只有ie才支持为createElement传递这样的参数
var ifr = document.createElement('<iframe  onload="alert('loaded');" src="https://3water.com/index.php"></iframe>');   
document.body.appendChild(ifr);  

由于iframe元素包含于父级页面中,因此以上方法均不存在跨域问题。

实际上IE提供了onload事件,但必须使用attachEvent进行绑定。

var ifr = document.createElement('iframe');   
ifr.src = 'http://b.3water.com/b.php';   
if (ifr.attachEvent) {   
    ifr.attachEvent('onload',  function(){ alert('loaded'); });   
} else {   
    ifr.onload  = function() { alert('loaded'); };   
}   
document.body.appendChild(ifr);  

6. frames
window.frames可以取到页面中的帧(iframe、frame等),需要注意的是取到的是window对象,而不是HTMLElement。

var ifr1 = document.getElementById('ifr1');   
var ifr1win = window.frames[0];   
ifr1win.frameElement === ifr1;   // true   
ifr1win === ifr1;    // false  
Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
微信小程序实现日历功能
Nov 27 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 #Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 #Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 #Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 #Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 #Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 #Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 #Javascript
You might like
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
shallow copy和deep copy的区别
2016/05/09 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
怎么样写好简历中的自我评价
2013/10/25 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
市场营销计划书
2015/01/17 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
小学数学教学随笔
2015/08/14 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
PyQt5实现多张图片显示并滚动
2021/06/11 Python