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相关操作的更多相关文章

  1. jquery 实践操作:iframe 相关操作

    此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...

  2. WebDriver API——javascript的相关操作

    有些时候webdriver是没法操作元素或浏览器的,这时候我们可以通过javascript来进行相关的操作,昨天在群里一个朋友定位一个显示框,总是无法定位点击,或者是点击无效,这个时候就可以用java ...

  3. iframe相关操作

    内容摘要 父级获取iframe中的元素 父级触发iframe中的函数 iframe触发父级元素绑定的事件 iframe触发父级函数方法 iframe触发父级元素的值 parent.html <! ...

  4. Javascript 数组相关操作

    数组排序问题: sort() arr.sort() 可以直接进行排序,但是排序的方式是按unicode 顺序而来,比如1,1000,200,这个顺序不是我们想要的结果: 所以有了另一种方法,针对num ...

  5. iframe的操作

    获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe 这是demo.html,这个页用iframe嵌入了ifra ...

  6. javascript: iframe switchSysBar 左欄打開關閉,兼容各瀏覽器操作

    <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Con ...

  7. Silverlight与JavaScript的交互操作

    Silverlight和JavaScript交互介绍以及简单Demo演示,主要包括JavaScript操作Silverlight数据.Silverlight操作JavaScript数据以及数据模版绑定 ...

  8. javascript 事件相关使用总结01

    javascript 事件相关使用总结01 这里总结一下js事件相关的经验. addEventLinstener()介绍 注册事件最基础的函数是这个 target.addEventListener(t ...

  9. JqGrid相关操作

    JqGrid相关操作 根据jqGrid的文档,要想生成一个jqGrid,最直接的方法就是:$("#grid_id").jqGrid(options);也就是通过选择符得到一个tab ...

随机推荐

  1. C/C++ 打印文件名、行号、函数名的方法

    转自:http://zhidao.baidu.com/link?url=JLCaxBAXLJVcx_8jsyJVF92E_bZjo4ONJ5Ab-HGlNBc1dfzcAyFAIygwP1qr18aa ...

  2. js 刷新当前页面会弹出提示框怎样将这个提示框去掉

    //禁止刷新提示window.onbeforeunload = function() { var n = window.event.screenX - window.screenLeft; var b ...

  3. 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 ...

  4. 关于.net服务启动注册到zookeeper,但是注册节点20分钟自动消失解决办法

        ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,作用简单描述就是相当于一个中介,服务提供者将服务注册到zk,服务调用者直接从zk获取,zk的作用就是协调     最近碰到公 ...

  5. ie6 ie7 userdata 本地存储 引发的惨案.

    我使用 documentElement 作为userdata 作为本地存储的载体. document.documentElement.addBehavior("#default#userda ...

  6. mappers标签引入映射器的四种方式

    第一种方式:mapper标签,通过resource属性引入classpath路径的相对资源 <!-- Using classpath relative resources --> < ...

  7. 【bzoj5210】最大连通子块和 树链剖分+线段树+可删除堆维护树形动态dp

    题目描述 给出一棵n个点.以1为根的有根树,点有点权.要求支持如下两种操作: M x y:将点x的点权改为y: Q x:求以x为根的子树的最大连通子块和. 其中,一棵子树的最大连通子块和指的是:该子树 ...

  8. MySQL-常见数据拆分办法

    在生产环境中,由于业务的增长或者业务的拆分,DBA经常需要拆库操作.那么我们常见的拆库手段有哪些呢? 我这里提供几种解决办法: 1. 使用mysqldump 把表逻辑倒出,然后再source 到其它地 ...

  9. Spring点滴二:Spring Bean

    Spring Bean: 被称作bean的对象是构成应用程序的支柱,是由Spring Ioc容器管理.bean是一个被实例化,配置.组装并由Spring Ioc容器管理对象. 官网API:A Spri ...

  10. 【bzoj4541】 Hnoi2016—矿区

    http://www.lydsy.com/JudgeOnline/problem.php?id=4541 (题目链接) 题意 给出一个平面图,若干询问,每次询问一个凸多边形内小多边形面积的平方和与面积 ...