ホーム>Web デザインのチュートリアル>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.taabao.com/index.htm のキーコード

<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.com/xxx.htm" フレームボーダー="0" スクロール="いいえ" style="height:0;"></iframe>

次の JS をページに追加します。

<mce:script type="text/javascript"><!--
（関数（）{
/**
* 現在のドメインを取得します
**/
関数_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];
}
_ホスト名を返します;
}
document.domain = _getDomain();
})();
// --></mce:script>

2. 次のコードをサブページ http://www.chinaz.com/xxx.htm に埋め込みます。それでおしまい


<mce:script type="text/javascript"><!--
（関数（）{
/**
* 現在のドメインを取得します
**/
関数_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];
}
_ホスト名を返します;
}

window.onload = 関数()
{
// サブページのドメインを設定します
document.domain=_getDomain();
function_setHeight()
{
if (window.parent != ウィンドウ)
{
試す
{
// 親 iframe の高さを設定します
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
}
キャッチ(e)
{
}
}
//主にサブページがロードされた後の高さの変更と互換性を持たせるために、2 秒ごとに設定します。
setTimeout(_setHeight,2000);
}
// サブページのロード後に 1 回呼び出されます
_setHeight();
}
})();
// --></mce:script>

www.chinaz.com、book.chinaz.com など、異なる親ページはまったく異なるドメイン名を持っています。この解決策は、プロキシ ページ www.chinaz.com/proxy.htm www.chinaz.com/index.htm ページを使用することです。本を埋め込むには .chinaz.com/xxxx.htm を埋め込み、xxx.htm は www.chinaz.com/proxy.htm を非表示にしてプロキシとして埋め込む必要があります。最後にwww.chinaz.com/proxy を書き込むことができます。 .htm#500 は、高さ 500 ピクセルを意味します。

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" フレームボーダー="0" スクロール="いいえ" style="height:0;"></iframe>

次の JS を追加します。


  1. <mce:script type= "text/javascript" ><!--
  2. （関数（）{
  3.      /**
  4. * 現在のドメインを取得します
  5. **/   
  6.     関数_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.          _ホスト名を返します;
  14. }
  15. document.domain = _getDomain();
  16. })();
  17. // --></mce:script>

2. www.chinaz.com/xxxx.htm のキーコード:


<iframe スクロール="no" フレームボーダー="0" スタイル="表示: なし; mce_style="表示: なし;" src="http://www.chinaz.com/proxy.htm#597" mce_src=" http://www.chinaz.com/proxy.htm#597" id="taabaoIframe">
</iframe>


<mce:script type="text/javascript"><!--
（関数（）{
var pageHeight = document.body.scrollHeight;
document.getElementById('taabaoIframe').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">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<本文>
<mce:script type="text/javascript"><!--
（関数（）{
/**
* 現在のドメインを取得します
**/
関数_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];
}
_ホスト名を返します;
}
document.domain = _getDomain();
var height = window.location.hash.substring(1);
試す{
var el = window.top.document.getElementById('J_selfAdapting');
if(el) {
el.style.height = 高さ + 'px';
}
}
キャッチ (e) {}
})();
// --></mce:script>
</body>
</html>

関連記事