- 浏览: 1093219 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
JS操作iframe
1. 获得iframe的window对象
2. 获得iframe的document对象
3. iframe中获得父页面的window对象
4. 获得iframe在父页面中的html标签
5. iframe的onload事件
6. frames
参考文章
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属性。
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属性。
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中是不会有弹出框的。
var ifr = document.createElement('iframe');
ifr.src = 'http://www.b.com/index.php';
ifr.onload = function() {
alert('loaded');
};
document.body.appendChild(ifr);
但是ie却又似乎提供了onload事件,下面两种方法都会触发onload
方法一:
<iframe onload="alert('loaded');" src="http://www.b.com/index.php"></iframe>
方法二:
//只有ie才支持为createElement传递这样的参数
var ifr = document.createElement('<iframe onload="alert('loaded');" src="http://www.b.com/index.php"></iframe>');
document.body.appendChild(ifr);
由于iframe元素包含于父级页面中,因此以上方法均不存在跨域问题。
实际上IE提供了onload事件,但必须使用attachEvent进行绑定。
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.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
参考文章
Iframes, onload, and document.domain
【翻译】Iframe, onload 与 document.domain
《JS权威指南第五版》
http://www.cnblogs.com/rainman/archive/2011/02/16/1956431.html
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2456为什么使用 javascript 测试框架时,没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数(Arrow Function)
2018-01-25 13:46 1054一、简介 箭头函数(Arrow Function)是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2266刚出来不久的 ES8 包含了 async 函数,它的出现,终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 565点此查看全部: http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1558jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1629HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3902浏览器处于安全原因,在使用 Ajax 进行请求访问时,不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 91725 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 635效果图: function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 690jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 625attr() 用于自定义属性,id ; prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 625Jquery mouseenter() vs mouseove ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1049前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 812详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 888通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用:网页在线聊天
2016-11-08 11:48 4215概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10101. 判断两个字符串是否:字母相同切长度相同(空格不算)。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 839函数继承可以分为两种:1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 660一、用法 undefined 关键字有两种用法: 1. 如 ... -
javascript之 == vs ===
2016-06-12 15:59 625一、Comparison Overview 1. Speed ...
相关推荐
javascript动态调整iframe高度
js操作iframe的一些知识;
JavaScript实现IFrame子窗口调用父窗口的全局变量
主要处理javascript对iframe框架的处理
用javascript写可拖动iframe,用面向对象的方式实现的,在主页面里实例化。
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
服务器上javascript木马,iframe木马清理工具,用后删除
JAVASCRIPT让IFRAME框架的高度自适应
javascript浮动div,可拖拽div,遮罩层(div和iframe实现)
javascript iframe 自适应高度js demo
但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/...
JS获取/设置iframe内对象元素、文档的几种方法 1、IE专用(通过frames索引形象定位): 代码如下: document.frames[i].document.getElementById(‘元素的ID’); 2、IE专用(通过iframe名称形象定位): 代码如下: ...
IE方法:document.frames[‘myFrame’].document.getElementById(‘test’).value; 火狐方法:document.getElementById(‘myFrame’).contentWindow.document.getElementById(‘test’).value; ...
NULL 博文链接:https://bozch.iteye.com/blog/2005518
一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png...
IFRAME间链接变换.rar
通过js实现的子窗体与父窗体之间的值传递
NULL 博文链接:https://shenlm203.iteye.com/blog/819641
Iframe页面的滚动.rar
用javascript实现可拖动的iframe页面效果的js