iframe 自适应高度

http://www.alixixi.com/web/a/2010121366553.shtml

 

最近做到这样的项目，自己实现了一下

场景是 跨域 子页面动态高度的

自己的实现用到了 postMessage 和 跨域 代理 iframe  。

参考了这篇博客的内容，记录一下，有空再完善一下具体方案。 

 每半秒钟检测一下子页面高度，是否有变化，如果变化发送信息到主域。

it.e.addEventListener(window,'load',function(){
        
    it.winHeight = it.getHeight();
    try{postMsg('setHeight|'+it.winHeight);}catch(e){};    
    setInterval(function(){
            try{
                if(it.winHeight != it.getHeight()){
                    it.winHeight = it.getHeight();
                    postMsg('setHeight|'+it.winHeight);
                    }else{
                        //console.log(it.winHeight)    
                        }
                }catch(e){};
            },5E2);
            
        

        }); 

 

 postMsg 的实现：

 支持postMessage 的 调用postMessage 不支持的IE6 IE7 用iframe代理，通过调取主域下的js_proxy.html+search值 传输信息到主域。 

function postMsg(msg) { 
  if(window.parent.postMessage) { 
     window.parent.postMessage(msg, hostDomain); 
  } else {
     // alert(msg);
    var proxy = hostDomain+'/js_proxy.html?',
        frame = document.getElementById('js_proxy');
    var clear = function(f){
            try{
                f.contentWindow.document.write('');
                f.contentWindow.close();
                document.body.removeChild(frame);
            }catch(e){}
        }; 
    if(frame){
        clear(frame);
        };             
    frame = document.createElement('iframe');
        document.body.appendChild(frame);
        frame.id = "js_proxy"
        frame.style.display = 'none';
    frame.name = msg;
    frame.contentWindow.location = proxy+msg;
  }; 

 }; 

接收数据和执行的实现：

 主域中的脚本，接收message

 

if(window.postMessage) { 
  if(typeof window.addEventListener != 'undefined') { 
    window.addEventListener('message', onmessage, false); 
  } 
  else if(typeof window.attachEvent != 'undefined') { 
    window.attachEvent('onmessage', onmessage); 
  } 

};

主域下的js_porxy.html?msg  通过分析 location.search 来接收数据并处理。

 

 var hash = window.location.search.toString().substring(1);

        //alert('trance'+hash);
        var msg = hash,func = msg.split('|')[0] , parm = msg.split('|')[1];
         if(func == 'setHeight'){
            parent.parent.window.document.getElementById('thridparty').height = parm;
            };

 

 通过hash 也可以，但是 不知道为何在实现的时候 出现莫名其妙的hash被截断的情况，改用search解决。