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 ...
随机推荐
- 关于对JSON.parse()与JSON.stringify()的理解
JSON.parse()与JSON.stringify()的区别 JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"nam ...
- P4910 帕秋莉的手环
题目背景 帕秋莉是蕾米莉亚很早结识的朋友,现在住在红魔馆地下的大图书馆里.不仅擅长许多魔法,还每天都会开发出新的魔法.只是身体比较弱,因为哮喘,会在咏唱符卡时遇到麻烦. 她所用的属性魔法,主要是生命和 ...
- Day22-Django之缓存
由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...
- VSS2005 上传pdf 空白
加补丁 VS80-KB943847-X86-INTL.exe
- Go 示例测试实现原理剖析
简介 示例测试相对于单元测试和性能测试来说,其实现机制比较简单.它没有复杂的数据结构,也不需要额外的流程控制,其核心工作原理在于收集测试过程中的打印日志,然后与期望字符串做比较,最后得出是否一致的报告 ...
- BZOJ 2527 Meteors | 整体二分
BZOJ 2527 Meteors 题意 一个圆环上有m个位置,编号为1~m,分别属于n个国家. 有k个时刻,每个时刻都会给圆环上的一个区间中每个位置的值加上一个数. 每个国家有一个目标,问对于每个国 ...
- 【BZOJ4006】【JLOI2015】管道连接
Description 传送门 Solution 题目要求相同颜色的点必须在一个连通块中,但会有多个颜色同属一个连通块使得解更优的情况. 想一想DP能否行得通:设\(g_i\)表示已考虑颜色状态为\( ...
- BZOJ4870 [Shoi2017]组合数问题 【组合数 + 矩乘】
题目链接 BZOJ4870 题解 \[ans = \sum\limits_{i = 0}^{\infty}{nk \choose ik + r} \pmod p\] 发现实际是求 \[ans = \s ...
- 一次lvs迁移记录
需求:从117.119.33.99迁移到122.14.206.125,lvs为dr模式,系统版本为debian7 1.安装lvs和keepalived # aptitude install -y ip ...
- 所以到底什么是 Growth Hacking?
Growth hacking 在硅谷的确是有快被用坏的趋势,之所以在大陆的互联网创业圈里还没有普及开来,我想一个是由于这个词并没有对应的中文解释,没有一个能够找到一个相对完美的解释,就像 “hack” ...