码迷,mamicode.com
首页 > 编程语言 > 详细

javascript iframe 操作(一)

时间:2015-12-18 21:18:30      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

[兼容所有浏览器 包括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 操作(一)

标签:

原文地址:http://www.cnblogs.com/zrp2013/p/5058024.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!