iframe 適応高さを実装するための JS メソッド (IE および FireFox と互換性があります)

この記事の例では、JS で iframe 適応高さを実装する方法を説明します。参考までに共有します。詳細は次のとおりです:

私は以前、iframe の適応高さの問題に悩まされており、FF では多くの JS コードが愚かになるようです。その後、FF と互換性があると主張する数千のコードの山から、最終的に次のコードを掘り出しました。使ってみましたが、本当に便利です。特に私のような JS スキルの低い人にとっては (ごめんなさい)、このコードはシンプルで理解しやすく、iframe があるページの タグに次のコードをコピーして貼り付けるだけです。 ID 名を変更するだけです (変更する場所が 2 か所あり、その場所はコード内で説明されていることに注意してください)。

このコードを作成した友人に敬意を表します。

ステップ 1: タグの下に次の JS コードを入力します

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); //将iframe1替换为你的ID名
  var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument;
  if(frm != null && subWeb !=null)
  {
   frm.style.height="0px";//初始化一下,否则会保留大页面高度
   frm.style.height = subWeb.documentElement.scrollHeight+"px";
   frm.style.width = subWeb.documentElement.scrollWidth+"px";
   subWeb.body.style.overflowX="auto";
   subWeb.body.style.overflowY="auto";
  }
}
</script>

ステップ 2: iframe タグに id="iframe1"onload="adjustFrameSize()" を追加します

例:

<iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" height="300px" target="_self"frameborder="0"></iframe>

このコードには小さな欠点があります。つまり、iframe 内のコンテンツと外側の境界線 (外側の境界線がある場合) の間の距離は、使用後に適切に調整できます。 IE6.0以降およびFF 他のブラウザはテストしていませんが、使用中に問題が見つかった場合、またはより良い解決策がある場合は、共有してください。

iframe ページ内に Ajax でロードされたページがある場合、または js によるコンテンツの動的な追加により iframe の高さが変更される場合は、次のメソッドを追加できます:

1: 次のコンテンツをサブページに追加します

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

dom を変更する このメソッドの呼び出しの一部

2: 親ページが

を追加します

//適応性が高い

var iframe = document.getElementById("iframe1");
function iframeHeight() {
  var hash = window.location.hash.slice(1), h;
  if (hash && /height=/.test(hash)) {
    h = hash.replace("height=", "");
    iframe.style.height = h+"px";
    window.location.hash = "#temp";//防止点击其他页面时高度不变
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

iframe 適応高さを実装するためのその他の JS メソッド (IE および FireFox と互換性あり) 関連記事については、PHP 中国語 Web サイトに注目してください。