iFrame 跨域高度自适应问题解决

需求是：A页面(例如：www.taobao.com) 要嵌入B(例如： www.alibaba.com)，因为不能确定B页面的高度，所以要求高度自适应。 

 具体代码：

 iframe主页面 A.html

  <div> 

     <iframe id="aFrame" scrolling='no' border=0 frameborder=0 width=100% height="400px" class="failure" 

src="www.alibaba.com/B.html" runat="server"></iframe>

</div>  

 

cross.js --cross放到父页面的域名下

var inner  =  inner  ||  {}; 
var getUrlValue  =  function (url) {
    var url  =  (url  !==  undefined)  ?  url : window.location.href;
     if  (url.indexOf( " # " )  >   - 1 ) {
        var variable  =  url.split( " # " )[ 1 ];
    }  else  {
        var variable  =  url.split( " ? " )[ 1 ]; 
    }
     if  (variable  ===  undefined) {
         return  {}; 
    }  else  {
        var value  =  {};
        variable  =  variable.split( " & " );
         for  (var i  =   0 , m  =  variable.length; i  <  m; i ++ ) { 
            value[variable[i].split( " = " )[ 0 ]]  =  variable[i].split( " = " )[ 1 ]; }
             return  value;
    }
}
var mathor_url  =  getUrlValue()[ ' mathor_url ' ]; 
if  ( ! mathor_url) {
     if  ( /alibaba.com /.test(window.location.href.match(/[^htps\/]*[^\/]+/g)[1])) {---------判断是否是阿里巴巴的域名
        mathor_url  =   " www.taobao.com.cn/qiantao " ; --------------要修改的A页面服务器地址（此地址是proxy放置地址的前段部分）
    } else {
        mathor_url = "

www.taobao.com.cn/qiantao

" ; ------------

要修改的A页面服务器地址

(可以是测试地址,或者是如果正式测试的都一样，则else可不要)
    }
}
inner  =  {
    iframe_el:  null ,
    url:  ' http:// '   +  mathor_url,
    aid:  1 ,
    href:  null ,
    time:  null ,
    signA:  false ,
    autoHeight:  true , 
    getDocHeight: function () {
        var height  =  (navigator.appName  ==   " Microsoft Internet Explorer " )  ?  document.body.scrollHeight  +   20  : document.body.offsetHeight  +   20 ; 
         return  height;
    },
    postAction: function (u) {
        var fd  =   this ; clearInterval( this .time);
        fd.iframe_el_new  =  document.createElement( ' iframe ' );
        fd.iframe_el_new.height  =   0 ;
        fd.iframe_el_new.style.height  =   ' 0px ' ;
        fd.iframe_el_new.style.width  =   ' 0px ' ;
        fd.iframe_el_new.style.border  =   ' none ' ;
        fd.iframe_el_new.width  =   0 ;
        fd.iframe_el_new.frameborder  =   0 ;
        fd.iframe_el_new.border  =   0 ;
        fd.iframe_el_new.scrolling  =   ' no ' ;
        fd.iframe_el_new.src  =  fd.url  +   " /proxy.htm#aid= "   +   this .aid  +   " & "   +  u;
        fd.iframe_el.parentNode.appendChild(fd.iframe_el_new);
        fd.iframe_el.parentNode.removeChild(fd.iframe_el);
        fd.iframe_el  =  fd.iframe_el_new;
         this .aid ++ ;
    }, 
    setHeight: function (height) {
         if  (height  ===  undefined) {
            height  =   this .getDocHeight(); 
        }
         this .postAction( " action=setheight&height= "   +  height);
    }, 
    start: function () {
        var fd  =   this ;
        fd.iframe_el  =  document.getElementById( "a Frame " ); -----更改ifram的名称
         if  ( this .autoHeight) {
            fd.old_height  =   0 ;
            var autoHeight  =  function () {
                 if  (fd.old_height  !=  inner.getDocHeight()) {
                    fd.old_height  =  inner.getDocHeight();
                    fd.setHeight();
                } 
            }
            setInterval(autoHeight,  200 );
        }
    }
};

document.write( ' <iframe id="aFrame" style="width:0; height:0; border:none;" frameborder="0" scrolling="no" src=" '   +  inner.url  +   ' /proxy.htm#aid=0&action=setheight&height= '   +  inner.getDocHeight()  +   ' "></iframe> ' ); -----此处也要进行修改，拼接proxy.htm的位置，注意proxy.htm存放的位置
inner.start();
(function () { if  ( !! window.ActiveXObject  &&   ! window.XMLHttpRequest) {
        var links  =  document.getElementsByTagName( ' a ' ); 
         for  (i  =  links.length  -   1 ; i  >=   0 ; i -- ) { 
            var clink  =  links[i]; 
             if  (clink.target  ==   " _top " ) { 
                clink.onclick  =  (function () { 
                    var chref  =  clink.href; 
                     return  function () { 
                         if  (window.top) { 
                            window.top.location  =  chref; 
                        } 
                    } 
                })() 
            } 
        } 
    } 

})()  

 proxy.htm （代理页） --代理页面放到父页面的域名下

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "  " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

 <html xmlns="http://www.w3.org/1999/xhtml">

< head >
     < title ></ title >
</ head >
< body >
< script type = " text/javascript " >
    var old_aid  =  null ;
    var action  =  function () {
         try  {
             if  (window.location.href.indexOf( " # " )  ==  - 1 )  return ;
            var aid  =  window.location.href.match( / (# |& )aid = (. *? )( &| $) / ig)[ 0 ].match( / [ 0 - 9 ] +/ )[ 0 ];
            var height  =  window.location.href.match( / (# |& )height = (. *? )( &| $) / ig)[ 0 ].match( / [ 0 - 9 ] +/ )[ 0 ];
             if  (aid  ==  null )  return ;
            old_aid  =  aid;
             if  ( - [ 1 , ]) {
                height  =  parseInt(height)  +  20 ;
            }
            window.parent.parent.document.getElementById( " aFrame " ).style.height  =  height  +  " px " ;
        }  catch  (e) { }
    };
    action();
</ script >
</ body >
</ html >

 

 最后将自适应的页面www.alibaba.com/B.html中添加引用cross.js脚本(放到</body>之前)