javascript iframe 操作(一)
[兼容所有浏览器 包括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操作。
javascript iframe 操作(一)的更多相关文章
- javascript: iframe switchSysBar 左欄打開關閉,兼容各瀏覽器操作
<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Con ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- select元素javascript常用操作 转
/*------------------------------------------------------ *作者:xieyu @ 2007-08-14 *语言:JavaScript *说明:s ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- JavaScript动态操作style
1.易错:修改元素的样式不是设置class属性,而是className属性.class是JS的一个保留关键字. 2.易错:单独修改样式的属性使用"style.属性名"3.注意在cs ...
- RX学习笔记:JavaScript数组操作
RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...
- Javascript 文件操作(整理版)
Javascript 文件操作 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详细介绍 ...
随机推荐
- pandas判断缺失值的办法
参考这篇文章: https://blog.csdn.net/u012387178/article/details/52571725 python pandas判断缺失值一般采用 isnull(),然而 ...
- http://blog.sina.com.cn/s/blog_628cc2b70102v115.html
http://blog.sina.com.cn/s/blog_628cc2b70102v115.html
- @value
通过name来获取bean对象. 这一点eclipse就没有intelliJ好,拉到方法内部上面就不现实方法名了,这里是上面调用的方法的内部. 处理内部属性: 然后就在这里抛出异常了: 我们打个deb ...
- 带伪3d的类型的流程画图工具
Edraw Max 类似:
- 怎么成为PHP专家
当阅读各种和PHP相关的博客.Quora问题.Google+社区.资讯和杂 志的时候,经常会注意到在技术上出现两极分化的现象.问题均围绕在“我如何连接到一个MySQL数据库?”,或者是“我如何使得邮件 ...
- angular - 如何运行在起来 - 使用nginx
nginx下载地址,使用的是标准版的: 点击下载nginx nginx下载完后,解压 dist文件夹下面所有angular文件放入html文件夹中. 最后命令行cd到当前nginx.exe目录,启动命 ...
- Python基础之字符串的练习
练习1 #!/usr/bin/python -tt # Copyright 2010 Google Inc. # Licensed under the Apache License, Version ...
- map方法,以及filter方法的使用
map()方法,会返回一个 jQuery 封装的数组, 这个数组不能直接使用,需要使用 get() 来处理返回的对象以得到基础的数组. 例子: <!DOCTYPE html> <ht ...
- Android_View_得到Activity
Context context = view.getContext(); if (context instanceof Activity){ Activity activity = (Activity ...
- tomcat 输入localhost:8080显示404 (找不到tomcat主页)
最近使用tomcat时常出现一个问题,tomcat开启后浏览器输入localhost:8080时显示404,但是输入项目的路径是可以看到效果的,因为没啥大碍,所以没有在意 [ 在这里顺便介绍几种访问 ...