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 相关文章推荐
javascript 原型继承介绍
Aug 30 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
Symfony查询方法实例小结
2017/06/28 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
js实现随机8位验证码
2020/07/24 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
详解python中*号的用法
2019/10/21 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python元组的概念知识点
2019/11/19 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
用python进行视频剪辑
2020/11/02 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
建筑专业自荐信
2013/10/18 职场文书
大学生专业个人学习的自我评价
2013/10/26 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
全陪导游词
2015/02/04 职场文书
孔繁森观后感
2015/06/10 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB