iframe自適應高度解決方案

    經常會有父頁面需要通過iframe嵌入另一個子頁面,又要適時根據子頁面的高度調整父頁面中iframe的高度,這就要求 頁面必須具有自適應功能。自適應思想比較簡單:就是父頁面中iframe高度必須要適時根據子頁面 高度進行調整。 由於涉及到js操作,因此對於不同域名的自適應解決方案有所不同,主要是在解決跨域問題。

 

  •   對於同父級域名下的自適應高度:jipiao.taobao.com/index.htm 頁面中嵌入jiudian.taobao.com/xxx.htm頁面

       

  1.0   http://jipiao.taobao.com/index.htm中關鍵代碼


 

 
<iframe id="J_selfAdapting" src="http://jiudian.taobao.com/xxx.htm" mce_src="http://jiudian.taobao.com/xxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>


頁面增加如下JS:
<mce:script type="text/javascript"><!--
 (function(){
    /**
     *	獲取當前域
	 **/
	function _getDomain(){
		var _hostname = window.location.hostname.toString();
		var _hosts = _hostname.split(".");
		var _len = _hosts.length;
		if(_len>2){
			return _hosts[_len-2]+"."+_hosts[_len-1];
		}
		return _hostname;
	}
    document.domain = _getDomain();
})();
// --></mce:script> 

 

2.子頁面http://jiudian.taobao.com/xxx.htm 中嵌入如下代碼。即可。

 
<mce:script type="text/javascript"><!--
(function(){
    /**
     *	獲取當前域
	 **/
	function _getDomain(){
		var _hostname = window.location.hostname.toString();
		var _hosts = _hostname.split(".");
		var _len = _hosts.length;
		if(_len>2){
			return _hosts[_len-2]+"."+_hosts[_len-1];
		}
		return _hostname;
	}
   
	window.onload = function()
         {
			//設置子頁面的域
            document.domain=_getDomain();
            function _setHeight()
            {
               if (window.parent != window)
               {
                  try
                  {
					  //設置父級iframe的高度
                     parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
                  }
                  catch(e)
                  {
                  }
               }
			   //每隔2s設置一次,主要爲了兼容子頁面加載完畢之後高度再變化
               setTimeout(_setHeight,2000);
            }
			//子頁面加載完畢之後調用一次
            _setHeight();
        }
})();
// --></mce:script> 

 

 

  • 不同父級頁面,例如jipiao.taobao.com, www.koubei.com域名完全不一樣,解決辦法是使用一個代理頁面jipiao.taobao.com/proxy.htm jipiao.taobao.com/index.htm頁面嵌入 www.koubei.com/xxxx.htm,而xxx.htm需要隱藏嵌入jipiao.taobao.com/proxy.htm做爲代理,可以將高度寫在後面jipiao.taobao.com/proxy.htm#500,表示500px高度。

   1.jipiao.taobao.com/index.htm頁面中關鍵代碼:

  

<iframe id="J_selfAdapting" src="http://www.koubei.com/xxxx.htm" mce_src="http://www.koubei.com/xxxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>

 

增加如下JS:

 
<mce:script type="text/javascript"><!--
 (function(){
    /**
     *	獲取當前域
	 **/
	function _getDomain(){
		var _hostname = window.location.hostname.toString();
		var _hosts = _hostname.split(".");
		var _len = _hosts.length;
		if(_len>2){
			return _hosts[_len-2]+"."+_hosts[_len-1];
		}
		return _hostname;
	}
    document.domain = _getDomain();
})();
// --></mce:script> 

2. www.koubei.com/xxxx.htm 中關鍵代碼:

 
<iframe scrolling="no" frameborder="0" style="display: none;" mce_style="display: none;" src="http://jipiao.taobao.com/proxy.htm#597" mce_src="http://jipiao.taobao.com/proxy.htm#597" id="taobaoIframe">
</iframe>

 
 
<mce:script type="text/javascript"><!--
(function(){
var pageHeight = document.body.scrollHeight;
 document.getElementById('taobaoIframe').src = 'http://jipiao.taobao.com/proxy.htm#' + pageHeight;
})(); 
// --></mce:script> 

 

 

3.在代理頁面jipiao.taobao.com/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>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<mce:script type="text/javascript"><!--
  (function(){
    /**
     *	獲取當前域
	 **/
	function _getDomain(){
		var _hostname = window.location.hostname.toString();
		var _hosts = _hostname.split(".");
		var _len = _hosts.length;
		if(_len>2){
			return _hosts[_len-2]+"."+_hosts[_len-1];
		}
		return _hostname;
	}
    document.domain = _getDomain();
	var height = window.location.hash.substring(1);
    try{
		var el = window.top.document.getElementById('J_selfAdapting');
		if(el) {
		    el.style.height = height + 'px';
        }
	}
	catch (e) {}
})();
// --></mce:script> 
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章