ホーム>Web デザインのチュートリアル>WEB標準化

IFRAMEフレームページは、適応高さのソリューションを実装します

著者：Eve Cole 更新時間：2025-02-05 14:05:58

多くの場合、iframeを介して別のサブページに埋め込まれ、子ページの高さに基づいて親ページのiframeの高さを調整する必要があります。適応的なアイデアは比較的単純です。親ページのiframe高さは、子どものページの高さに応じてタイムリーに調整する必要があります。 JS操作が関与しているため、主にクロスドメインの問題を解決するために、異なるドメイン名の適応ソリューションが異なります。

同じ親ドメイン名の下の適応高さについては、www.chinaz.com/xxx.htmlページに埋め込まれたページwww.chinaz.com/index.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" "" "" "no "style =" height：0; "> </iframe>

ページは次のように追加されますjs：

<MCE：スクリプトタイプ= "text/javascript"> <！ -
（関数（）{
/**
*現在のドメインを取得します
**/
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：スクリプト>

2.次のコードは、サブページhttp://www.chinaz.com/xxx.htmに埋め込まれています。に


<MCE：スクリプトタイプ= "text/javascript"> <！ -
（関数（）{
/**
*現在のドメインを取得します
**/
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.ndsain = _getdomain（）;
function _setheigh（）
{{
if（window.parent！= window）
{{
試す
{{
//親レベルのiframeの高さを設定します
parent.document.getElementById（ "j_selfadapting"）。style.height = document.body.scrollheight+ 'px';
}
キャッチ（e）
{{
}
}
//ページページの読み込み後に高さを変更するように、2秒ごとに設定します
Settimeout（_setheight、2000）;
}
//サブページを読み込んだ後、一度電話してください
_setheight（）;
}
}）（）;
// - > </mce：スクリプト>

www.chinaz.com、book.chinaz.comのドメイン名などの異なるレベルのページは、プロキシページwww.chinaz.com/proxy.htm www.chinaz.com/indexを使用することです。 htm 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" "スクロール=" "style =" height：0; "> </iframe>

次のようにjsを追加します：


  1. <mce：script type = "text/javascript" > <！ -

  2. （関数（） {）

  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] + "。

  12. }

  13. return_hostname ;

  14. }

  15. document.domain = _getDomain（）;

  16. }）（）;

  17. // - > </mce：スクリプト>

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


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


<MCE：スクリプトタイプ= "text/javascript"> <！ -
（関数（）{
var pageheight = document.body.scrollheight;
document.getElementById（ 'taobaoiframe'）src = 'http://www.chinaz.com/proxy.htm#' + pageheight;
}）（）;
// - > </mce：スクリプト>

3.プロキシページbook.chinaz.com/proxy.htmのすべてのコードは次のとおりです。


<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<メタhttp-equiv = "content-type" content = "text /html; charset = gbk" />
</head>
<body>
<MCE：スクリプトタイプ= "text/javascript"> <！ -
（関数（）{
/**
*現在のドメインを取得します
**/
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 = windocy.location.hash.substring（1）;
試す{
var = window.top.document.getelementbyid（ 'j_selfadapting'）;
if（el）{{
el.style.head = height + 'px';
}
}
catch（e）{}
}）（）;
// - > </mce：スクリプト>
</body>
</html>

関連記事