iframeの動的なサイズ変更

StackOverflow https://stackoverflow.com/questions/604272

  •  03-07-2019
  •  | 
  •  

質問

この質問は何度も尋ねられていることがわかりますが、提案されている解決策はどれも、私が構築しているサイトでは機能しないようです。そのため、スレッドを再開しています。コンテンツの高さに基づいてiframeのサイズを変更しようとしています。 iframeを含むページとソースページの両方が同じドメインに存在します。

次の各スレッドで提案されたソリューションを試しました：

body.clientHeightへの参照が行われたときに、ブラウザが実際にドキュメントの高さを決定していないため、上記のソリューションは機能していないと思います。

使用しているコードは次のとおりです。

    var ifmBlue = document.getElementById("ifmBlue");
    ifmBlue.onload = resizeIframe;

    function resizeIframe()
    {
        var ifmBlue = document.getElementById("ifmBluePill");
        var ifmDiv = ifmBlue.contentDocument.getElementById("main");
        var height = ifmDiv.clientHeight;
        ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height ||  500) + 5 + 'px';
    }

fire debugを使用してスクリプトをデバッグする場合、iframe.contentDocumentのメインdivのクライアントの高さは0です。さらに、body.offsetHieght、＆amp; body.scrollHeightは0です。ただし、スクリプトの実行が終了した後、HTML iframe要素のDOMを調べると（fire debugを使用）、bodyのclientHeightが456で、内部divのclientHeightが742であることがわかります。 iframe.onloadが起動されたときにこれらの値がまだ設定されていないことを信じる。したがって、上記のスレッドの1つにつき、コードをiframeのソースページのbody.onloadイベントハンドラーに移動しました。このソリューションも機能しませんでした。

ご提供いただけるサポートは大歓迎です。

ありがとう、

CJ

役に立ちましたか？

解決

DynamicDriveにはこのようなスクリプトがあります。

新しいバージョンもあります。

2011更新：

このようなことよりもAJAXを使用することを強くお勧めします。特に、動的にサイズ変更するiframeは同じドメインでのみ機能することを考慮してください。

それでも少しわかりにくいので、標準ページの読み込みよりも絶対にAJAXを使用する必要がある場合、本当には history.pushState のようなものを使用する必要があります（そして標準ページの読み込みをサポートしていないブラウザのフォールバックとして使用できます）。 GitHubberによって作成された pjax と呼ばれる、このような処理を行うjQueryプラグインがあります。リポジトリナビゲーションにはのみを使用します。

他のヒント

ハンドラーを移動しましたか？多分、関数を内側のフレームに移動して、高さの値を取得するときにフレームオブジェクトではなく直接ボディを参照するようにする必要があります。その後、parent.set height関数を呼び出します

別のトリック、10ミリ秒のsettimeout後に関数を呼び出す

私はかつてその問題を抱えていたことを覚えていますが、IEのgetBoundingClientRect（）を使用してコンテンツの高さを取得し、Mozilla開発者センターで同様のものを確認しました。これは単なるヒントであり、調査しませんでした

別の注意として、ifmBluePillとは何ですか？それはiframeですか？またはその中のdiv？なぜ「contentDocument」を参照するのですか？ divの

ところで、DynamicDriveは、iframeの内容が変更された場合でも常にサイズを変更するようにスクリプトを改善しました。 http ：//www.dynamicdrive.com/dynamicindex17/iframessi2.htm

彼らのページから：

  

これはオリジナルのバージョンIIです   iframe SSIスクリプト。   オリジナルのスクリプトにより、シームレスに   ページに外部コンテンツを表示する   IFRAME経由。これを行う   IFRAMEのサイズを動的に変更します   含まれているページの高さ   その中に、可能な限り排除   IFRAMEスクロールバーが表示されない   外部全体をぴったりと表示   コンテンツ。 SSI（サーバー   サイドインクルード）DHTMLを使用してエミュレート！   このスクリプトは、IE5 +と   NS6 +、および他のブラウザの場合、サポート   完全に非表示にするオプション   問題のiframeまたは表示する   デフォルトの高さを使用します。

     

現在、このスクリプトは   ロードできるという点でオリジナル   IFRAMEへの追加文書*   ページが読み込まれた後でも   IFRAMEは動的に調整します   新しいドキュメントに合わせた高さ。だから使用する   必要なのはこのスクリプトだけではありません   外部コンテンツを表示する   IFRAMEタグですが、これを変更する予定です   ページが読み込まれた後のコンテンツ。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top