javascript iframe相关操作
1. 获得iframe的window对象
iframeElement.contentWindow
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进行绑定。
ar 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
7. 定义document.domain
这个声明消除了域名的区别,我们可以像处理两个相同域名的网站一样处理这两个页面。
javascript iframe相关操作的更多相关文章
- jquery 实践操作:iframe 相关操作
此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...
- WebDriver API——javascript的相关操作
有些时候webdriver是没法操作元素或浏览器的,这时候我们可以通过javascript来进行相关的操作,昨天在群里一个朋友定位一个显示框,总是无法定位点击,或者是点击无效,这个时候就可以用java ...
- iframe相关操作
内容摘要 父级获取iframe中的元素 父级触发iframe中的函数 iframe触发父级元素绑定的事件 iframe触发父级函数方法 iframe触发父级元素的值 parent.html <! ...
- Javascript 数组相关操作
数组排序问题: sort() arr.sort() 可以直接进行排序,但是排序的方式是按unicode 顺序而来,比如1,1000,200,这个顺序不是我们想要的结果: 所以有了另一种方法,针对num ...
- iframe的操作
获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe 这是demo.html,这个页用iframe嵌入了ifra ...
- javascript: iframe switchSysBar 左欄打開關閉,兼容各瀏覽器操作
<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Con ...
- Silverlight与JavaScript的交互操作
Silverlight和JavaScript交互介绍以及简单Demo演示,主要包括JavaScript操作Silverlight数据.Silverlight操作JavaScript数据以及数据模版绑定 ...
- javascript 事件相关使用总结01
javascript 事件相关使用总结01 这里总结一下js事件相关的经验. addEventLinstener()介绍 注册事件最基础的函数是这个 target.addEventListener(t ...
- JqGrid相关操作
JqGrid相关操作 根据jqGrid的文档,要想生成一个jqGrid,最直接的方法就是:$("#grid_id").jqGrid(options);也就是通过选择符得到一个tab ...
随机推荐
- C/C++ 打印文件名、行号、函数名的方法
转自:http://zhidao.baidu.com/link?url=JLCaxBAXLJVcx_8jsyJVF92E_bZjo4ONJ5Ab-HGlNBc1dfzcAyFAIygwP1qr18aa ...
- js 刷新当前页面会弹出提示框怎样将这个提示框去掉
//禁止刷新提示window.onbeforeunload = function() { var n = window.event.screenX - window.screenLeft; var b ...
- Internet History, Technology and Security (Week 6)
Week 6 Technology: Transport Control Protocol (TCP) Welcome to Week 6 of IHTS. We are in our second ...
- 关于.net服务启动注册到zookeeper,但是注册节点20分钟自动消失解决办法
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,作用简单描述就是相当于一个中介,服务提供者将服务注册到zk,服务调用者直接从zk获取,zk的作用就是协调 最近碰到公 ...
- ie6 ie7 userdata 本地存储 引发的惨案.
我使用 documentElement 作为userdata 作为本地存储的载体. document.documentElement.addBehavior("#default#userda ...
- mappers标签引入映射器的四种方式
第一种方式:mapper标签,通过resource属性引入classpath路径的相对资源 <!-- Using classpath relative resources --> < ...
- 【bzoj5210】最大连通子块和 树链剖分+线段树+可删除堆维护树形动态dp
题目描述 给出一棵n个点.以1为根的有根树,点有点权.要求支持如下两种操作: M x y:将点x的点权改为y: Q x:求以x为根的子树的最大连通子块和. 其中,一棵子树的最大连通子块和指的是:该子树 ...
- MySQL-常见数据拆分办法
在生产环境中,由于业务的增长或者业务的拆分,DBA经常需要拆库操作.那么我们常见的拆库手段有哪些呢? 我这里提供几种解决办法: 1. 使用mysqldump 把表逻辑倒出,然后再source 到其它地 ...
- Spring点滴二:Spring Bean
Spring Bean: 被称作bean的对象是构成应用程序的支柱,是由Spring Ioc容器管理.bean是一个被实例化,配置.组装并由Spring Ioc容器管理对象. 官网API:A Spri ...
- 【bzoj4541】 Hnoi2016—矿区
http://www.lydsy.com/JudgeOnline/problem.php?id=4541 (题目链接) 题意 给出一个平面图,若干询问,每次询问一个凸多边形内小多边形面积的平方和与面积 ...