jQuery または JavaScript を使用してスクロールバーが表示されないように Iframe の高さを動的に調整するにはどうすればよいですか?

jQuery を使用した動的 iframe 高さ調整

iframe がコンテンツの高さにシームレスに適応し、スクロールバーを排除するために、開発者は実装時にしばしば課題に遭遇します。この機能。 jQuery または JavaScript を使用したソリューションを検討してみましょう。

このアプローチには、iframe コンテンツの高さを取得し、それに応じて iframe の高さを調整することが含まれます。これを実現する方法を示す jQuery スニペットを次に示します。

$("#TB_window", window.parent.document).height($("body").height() + 50);

このアプローチは Chrome などの一部のブラウザでは効果的かもしれませんが、TB_window 要素が折りたたまれる Firefox など、他のブラウザでは予期しない動作を引き起こす可能性があります。

この問題を解決するには、次を使用して iframe コンテンツの高さを直接取得できます。 JavaScript:

contentWindow.document.body.scrollHeight

コンテンツの高さを取得したら、iframe の高さを動的に変更できます:

  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }

このハンドラーをフックするには、IFRAME タグに次の属性を含めます。

<iframe>

iframe 内でコンテンツが更新される場合は、次のスクリプトを介して iframe 自体内から再度 iframeLoaded 関数を実行します:

parent.iframeLoaded();

このソリューションを実装すると、含まれるコンテンツに合わせて iframe の高さが動的に調整され、煩わしさのないシームレスなユーザー エクスペリエンスが提供されます。スクロールバー。

以上がjQuery または JavaScript を使用してスクロールバーが表示されないように Iframe の高さを動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。