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 相关文章推荐
Jquery常用技巧收集整理篇
Nov 14 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
JavaScript分页组件使用方法详解
Jul 26 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
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
php中error与exception的区别及应用
2014/07/28 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
python时间整形转标准格式的示例分享
2014/02/14 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Python类super()及私有属性原理解析
2020/06/15 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
论文评语大全
2014/04/29 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers