iframe跨域和同域下的onload

主页面嵌套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事件,兼容性最好。