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 相关文章推荐
关于JS管理作用域的问题
Apr 10 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
canvas绘制多边形
Feb 24 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
php代码把全角数字转为半角数字
2007/12/10 PHP
php 团购折扣计算公式
2011/11/24 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
实例解析Array和String方法
2016/12/14 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python输入中文的实例方法
2020/09/14 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
大学生个人推荐信范文
2013/11/25 职场文书
团队精神的演讲稿
2014/05/14 职场文书
法学自荐信
2014/06/20 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
就业协议书
2014/09/12 职场文书
反邪教教育心得体会
2016/01/15 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书