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 相关文章推荐
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
微信小程序实现文件预览
Oct 22 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
PHP4在Windows2000下的安装
2006/10/09 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
Prototype Selector对象学习
2009/07/23 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
Vue.js进阶知识点总结
2018/04/01 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
Python 3中的yield from语法详解
2017/01/18 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
《小熊住山洞》教学反思
2014/02/21 职场文书
员工入职担保书范文
2014/04/01 职场文书
亚运会口号
2014/06/20 职场文书
护士医德医风自我评价
2014/09/15 职场文书
九九重阳节标语
2014/10/07 职场文书
初三语文教学反思
2016/03/03 职场文书