iframe跨域和同域下的onload

2010-09-14 21:22 wlstyle 阅读(3606) 评论(0) 收藏举报

主页面嵌套iframe如何监听iframe的onload事件。

场景1：主页面和嵌套页面没有跨域问题。有两种解决方式。

1.监听主页面上的iframe元素的onload事件

html结构:

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>test iframe</title>
    </head>
    <body>
    <iframe id="J_Iframe" src="iframe.html"></iframe>

    </body>
</html>

js:

代码

//iframe元素
var el=document.getElementById('J_Iframe'),
//onload会执行的函数
callback=function(){
    var e=window.event||arguments[0],target=e.srcElement||e.target;
    alert("in");
    window.event ? target.detachEvent("onload",callback):target.onload=null;

},
userAgent=navigator.userAgent.toLowerCase();
if(!/opera/.test(userAgent) && /msie/i.test(userAgent)){
    el.attachEvent("onload",callback);
}else{
    el.onload=callback;
}

2.监听iframe对应的window对象的onload方法，此种处理方法需要得到iframe的window对象

html:相同

js:

代码

function getIframeWindow(iframeElement){
return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow;
};
//iframe元素
var el=document.getElementById('J_Iframe'),
//onload会执行的函数
callback=function(){
    var e=window.event||arguments[0],target=e.srcElement||e.target;
    alert("in");
    window.event ? target.detachEvent("onload",callback):target.onload=null;
},
ifWindow=getIframeWindow(el);
ifWindow.onload=callback;

场景2：主页面和嵌套页面有跨域情况且在同一个主域的情况下(full.aab.com和fulla.aab.com)：在这种情况下

1.可以完全采用和场景1第一种监听主页面iframe元素的onload事件。

2.如果需要监听iframe对应的window的onload的尝试了一下不可行。

主要的思路主要是：设置两个页面的 document.domain为同一个主域。然后为得到该window对象。监听i该window对象的onload事件。中间遇到一个问题。ie下直接拒绝访问。想说是iframe在执行设置domain之前和主页面是跨域的所以拒绝访问。试图使用setInterval判断子页面是否已经设置了domain。然后为该window对象添加onload事件。脚本顺利执行。但是最终此监听函数没有执行。该window已经load好了？抑或是某种潜规则？最终原因未知。

场景3：主页面和嵌套页面完全不在一个域中：在这种情况下

1.可以完全采用和场景1第一种监听主页面iframe元素的onload事件。

2.由于同源限制无法监听。

总结：最适合的方式直接监听主页面的iframe元素的onload事件,兼容性最好。

刷新页面返回顶部

铁匠

iframe跨域和同域下的onload

About