首頁>網頁設計教程>WEB標準化

iframe框架頁面實現自適應高度解決方案

作者：Eve Cole 更新時間：2010-01-06 17:05:40

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

對於同父級網域下的自適應高度：www.chinaz.com/index.html 頁面中嵌入www.chinaz.com/xxx.html頁面

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

<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.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://www.chinaz.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>

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

1.www.chinaz.com/index.htm頁面中關鍵代碼：


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

增加如下JS:


  1. <mce:script type= "text/javascript" ><!--
  2. ( function (){
  3.      /**
  4. * 取得目前域
  5. **/   
  6.      function _getDomain(){
  7.          var _hostname = window.location.hostname.toString();
  8.          var _hosts = _hostname.split( "." );
  9.          var _len = _hosts.length;
  10.          if (_len>2){
  11.              return _hosts[_len-2]+ "." +_hosts[_len-1];
  12. }
  13.          return _hostname;
  14. }
  15. document.domain = _getDomain();
  16. })();
  17. // --></mce:script>

2. www.chinaz.com/xxxx.htm 中關鍵程式碼：


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


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

3.在代理頁面book.chinaz.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>

相關文章