[兼容所有浏览器 包括IE7/8/9]

1.父页面中获取IFRAME的WINDOW对象

获得了window对象后,就可以调用iframe页面中定义的方法等。

IE:可以通过iframeId、window.iframeId、window.iframeName、window.frames[iframeId]、window.frames[iframeName]、window.frames[iframeIndex]和iframeElement.contentWindow这6种方法来获取iframe的window对象。

FF:可以通过window.iframeName、window.frames[iframeName]和iframeElement.contentWindow这3种方法获取window对象。

总结:为了兼容大多数浏览器,应使用iframeElement.contentWindow来获取。见如下代码:

var iframe = document.getElementById('iframe1').contentWindow;

2.父页面中获取IFRAME的DOCUMENT对象

总结:应使用以下两方法来获取,见代码:

<iframe id="iframe1" src="frame1.html"></iframe>
<script type="text/javascript">
//获取iframe的document对象
//方法1:先获取window对象再通过window.docuemnt
var iframe = document.getElementById('iframe1').contentWindow.document;
//可以使用jquery操作
$(iframe).find('#con').html('test');
//方法2:分支判断
function getIframeDom(iframeId) {
return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document;
}
</script>

  

注:为了防止iframe没有加载完,建议将获取iframe元素的操作放在这个里面:等待iframe加载完[ifrm为iframe的id值]
document.getElementById("ifrm").onload = function (){ }

3.IFRAME页面获取父页面的WINDOW对象

parent:父页面window对象
window.parent
top:顶层页面window对象
window.top
self:始终指向当前页面的window对象(与window等价)

如果窗口是顶级窗口,那么parent==self==top
根据这个可以防止网页被嵌套:

if(window!=window.top){
window.top.location.href=window.location.href:
}

兼容性:适用于所有浏览器,当拿到了父页面的window对象后,就可以访问父页面定义的全局变量和函数。

注:chrome要求在服务器环境下进行iframe操作。

参考资料:http://mao.li/javascript/javascript-iframe/

javascript iframe 操作(一)的更多相关文章

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

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

  2. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  3. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  4. select元素javascript常用操作 转

    /*------------------------------------------------------ *作者:xieyu @ 2007-08-14 *语言:JavaScript *说明:s ...

  5. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  6. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  7. JavaScript动态操作style

    1.易错:修改元素的样式不是设置class属性,而是className属性.class是JS的一个保留关键字. 2.易错:单独修改样式的属性使用"style.属性名"3.注意在cs ...

  8. RX学习笔记:JavaScript数组操作

    RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...

  9. Javascript 文件操作(整理版)

    Javascript 文件操作 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详细介绍 ...

随机推荐

  1. Codeforces D. Giving Awards 412 题解

    就是依照一定顺序输出排序. 比方a欠b的钱就不能先输出a然后输出b. 本题的技巧就是.要求的是不能先输出a然后输出b,可是能够先输出b然后输出a. 故此能够依照a欠b的钱的关系.建立图,然后DFS深度 ...

  2. angular 学习理解笔记

    原文:https://github.com/eoinkelly/notes/blob/master/angular/book-building-web-apps-w-angular/angular.m ...

  3. React的设计哲学 - 简单之美

    React最初来自Facebook内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护.于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前端界面的 ...

  4. ArcGIS Engine读取GDB中的Shape

    string gdbPath = @"D:\Documents\ArcGIS\Default.gdb"; FileGDBWorkspaceFactoryClass pFileGDB ...

  5. Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)

    http://www.jb51.net/article/38473.htm 首先启动命令行 1.在命令行运行:taskkill /f /im mysqld-nt.exe 下面的操作是操作mysql中b ...

  6. Django——如何在Django模板中注入全局变量?——part2

    模版中的变量由context中的值来替换,如果在多个页面模版中含有相同的变量,比如:每个页面都需要{{user}},笨办法就是在每个页面的请求视图中都把user放到context中.   from d ...

  7. LoadRunner测试Google Suggest

    Google的搜索框是典型的AJAX应用,用户在输入关键字的同时,前端页面通过xmlhttp与后台服务器动态交互,根据用户输入的关键字查找匹配的内容,向用户提示建议的搜索项,也就是所谓的“google ...

  8. ant-design table 分页(tableProps)

    1.布局 <Table dataSource={this.state.tableDetailList} scroll={{ y: '200px' }} style={{tableLayout: ...

  9. selenium从入门到应用 - 7,testNG的DataProvider

    本系列所有代码 https://github.com/zhangting85/simpleWebtest 本文将介绍一个Java+TestNG+Maven+Selenium的web自动化测试脚本环境下 ...

  10. 在OpenERP报表中使用selection 类型字段

    OpenERP 在报表的创作中始终有一个麻烦,那就是在报表中通过对象导航的方式获取的 selection 字段只能获取到该字段的 key 而不能获取对应的用户友好的描述文本. 举个具体的例子:销售单的 ...