9

重複の可能性:
コンテンツに基づいて iframe のサイズを変更する

ページの 1 つを iframe にロードしようとしています。ページがどれだけ大きくなるかはわかりません。ページ上のデータは動的に読み込まれます。どんなに大きくても小さくても、常に iframe をページに合わせたいと思います。ここに私が持っているものがあります:

function loadModal() {
    myframe = $('<iframe id="mymodal" src="MyPage.aspx" width="700"></iframe>');

    myframe.appendTo($('html'));

    var height = document.getElementById('modalPreview').contentWindow
                     .document.body.scrollHeight;

    $("#mymodal").attr("height", height);
}

ページが読み込まれた後、ページの高さを取得しようとしています。問題は、heightとして返されること0です。しかし、私がこれを行うと：

    setTimeout(function () {
        $("#mymodal").attr("height", height);
    }, 2000);

正しい高さがロードされます。データの読み込みに数秒かかるためだと思います。しかし、ページの読み込みが非常に速い場合、これはファンキーに見えます。または、ページの読み込みに 2 秒以上かかる場合でも、高さが 0 になります。

だから方法があります：

  1. データが読み込まれたら、iframe の高さを設定します。または、
  2. 親 iframe の高さをMyPage.aspx?から設定します。
4

2 に答える 2

12

オプション #2 を使用する場合は、DOM を使用して親ウィンドウにアクセスし、子から iframe の高さを設定できます。

$(document).ready(function() {
    var iframeWin = parent.document.getElementById("yourIframeID");
    iframeWin.height = document.body.scrollHeight;
});
于 2012-10-10T19:40:43.500 に答える
1

挿入する前に、onloadイベントを にフックできます。Iframe起動したら、iframe 内のドキュメントの高さを調べ、それに応じて高さを調整します。

于 2012-10-10T19:36:35.583 に答える