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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue实现路由切换改变title功能
May 28 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
Vue实现简单计算器
Jan 20 Vue.js
动态获取复选框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
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php实现可逆加密的方法
2015/08/11 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python字符串的方法与操作大全
2018/01/30 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
python 如何上传包到pypi
2020/12/24 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
初一科学教学反思
2014/01/27 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
高三英语复习计划
2015/01/19 职场文书
出国留学单位推荐信
2015/03/26 职场文书
初中同学会致辞
2015/08/01 职场文书