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. Excelutil 工具类

    1.说明:ExcelUtil主要用于获得单元格的数据和对对指定单元格中写入数据用! 相关代码如下: package main.java; import java.io.File; import jav ...

  2. php htmlentities和htmlspecialchars 的区别

    很多人都以为htmlentities跟htmlspecialchars的功能是一样的,都是格式化html代码的,我以前也曾这么认为,但是今天我发现并不是这样的.   The translations ...

  3. vue 大概流程(未完)

    规划组件结构 编写对应路由 具体写每个组件功能

  4. 12:打印1到最大的n位数

    面试题12:打印1到最大的n位数 剑指offer题目12,题目如下 输入数字n,按顺序打印出1到最大的n位十进制数,比如输入3,则打印出1,2,3一直到最大的三位数999 方法一 和面试题11< ...

  5. 解决 'findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件 提示问题

    如果出现提示“出现'findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件” 这是PATH环境变量的问题,将windows命令的目录添加到PATH中就over了.即:在path中追加:% ...

  6. 【刷题】BZOJ 3668 [Noi2014]起床困难综合症

    Description 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过研究相关文献,他找 ...

  7. 【ActiveMQ】- 发布/订阅模式

    publish/subscribe 特点:A发送的消息可以被所有监听A的对象的接收,就好比学校的广播,所有的学生都可以收听校园广播信息. 消息生产者: package com.zhiwei.advan ...

  8. 【BZOJ4027】兔子与樱花(贪心)

    [BZOJ4027]兔子与樱花(贪心) 题面 BZOJ 洛谷 题解 很直观的一个感受就是对于每个节点, 考虑它的所有儿子,如果能删就删. 那么我们把所有儿子按照给删去后给父亲\(c[i]\)的贡献从小 ...

  9. 20135319zl软件破解报告

    编写一个简单的C程序.要求只有输入a,才能通过. 现在,使用objdump –d po反汇编这个程序 找到main函数,可以发现movb $0x61,0x1f(%esp)这句语句中是将字符a(对应0x ...

  10. 所以到底什么是 Growth Hacking?

    Growth hacking 在硅谷的确是有快被用坏的趋势,之所以在大陆的互联网创业圈里还没有普及开来,我想一个是由于这个词并没有对应的中文解释,没有一个能够找到一个相对完美的解释,就像 “hack” ...