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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
js实现无缝轮播图特效
May 09 Javascript
vue3使用vue-router的完整步骤记录
Jun 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
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP学习笔记之数组篇
2011/06/28 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python队列原理及实现方法示例
2019/11/27 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python 使用office365邮箱的示例
2020/10/29 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
大型车展策划方案
2014/02/01 职场文书
员工年终自我评价
2014/09/14 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
烈士陵园观后感
2015/06/08 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
详解Python flask的前后端交互
2022/03/31 Python
Python 视频画质增强
2022/04/28 Python