javascript iframe 操作(一)
2015-12-18 19:16
627 查看
[兼容所有浏览器 包括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来获取。见如下代码:
2.父页面中获取IFRAME的DOCUMENT对象
总结:应使用以下两方法来获取,见代码:
3.IFRAME页面获取父页面的WINDOW对象
parent:父页面window对象
window.parent
top:顶层页面window对象
window.top
self:始终指向当前页面的window对象(与window等价)
如果窗口是顶级窗口,那么parent==self==top
根据这个可以防止网页被嵌套:
兼容性:适用于所有浏览器,当拿到了父页面的window对象后,就可以访问父页面定义的全局变量和函数。
注:chrome要求在服务器环境下进行iframe操作。
参考资料:http://mao.li/javascript/javascript-iframe/
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/
相关文章推荐
- 高效率去掉js数组中重复项
- Ext.js5的表格插件—checkbox/编辑等常见需求(15)
- JavaScript Cookies
- javascript制作验证码
- package.json依赖管理dependencies中 ^ 和 ~ 的区别
- Ext.js5的表格插件—展开和冻结和Ext.XTemplate(14)
- 摘抄的一些js
- 用JavaScript动态加载CSS和JS文件
- js 创建对象的三种方式——工厂模式、构造函数模式、原型模式
- jsp实现ajax的一个例子
- JS设置cookie,删除cookie
- JSON的读取与写入
- JSP Servlet 上传
- The JSR-133 Cookbook for Compiler Writers
- JavaScript面向对象编程(10)高速构建继承关系之对象拷贝
- arcgis api for javascript (2) 获取属性字段及自定义graphic样式
- js检测浏览器版本
- [置顶] 自定义EL表达式,将对象转成json格式,关键代码
- IE8 兼容JS trim() 解决方案
- bzoj1823 [JSOI2010]满汉全席(2-SAT)