1

投稿メッセージを使用して、iframeの高さを動的に調整しています。iframeを保持しているhtmlは、フレームのサイズ変更をトリガーするリスナーを追加します。親の（簡略化された）関連コードは次のようになります。

<div id="dynamic_content">
    <iframe  src="http://my.content"></iframe>-->
</div>

<script>
    window.onload = function () {
        window.addEventListener("message", handleEventTrigger, false);
    };

    function handleEventTrigger(evt) {
        var height = evt.data;
        alert("Received: " + evt.data);
        if (isNumber(height)) {
            $("#dynamic_content").height(height + "px");
        }
    }

    function isNumber(str) {
        return !isNaN(str - 0);
    }    
</script>

iframeのソースで、ロード時にpostMessageをトリガーします。基本的に、高さを送信したいidouterDivのdivがあります。関連するJavaScriptコードは次のとおりです。

window.onload = function () {
    var height = $("#outerDiv")[0].offsetHeight;
    if (isNumber(height)) {
        parent.postMessage(height, "*");   
    }        
};

今の私の問題は、これがたまにしか機能しないことです。イベントリスナーを追加してから投稿メッセージを送信するまでの間に競合状態があると想定しています。投稿メッセージが送信される前に、イベントリスナーをバインドしたことに依存しています。これを確実にするための適切な方法は何ですか？両方ともにバインドされていwindow.onloadます。これらは同じアドレスwindowですか、これは問題ですか？

4

2 に答える 2

0

これは単なる推測ですが、高さではなくコールバック関数名を投稿すると、競合状態や非同期タイミングを回避できるため、リスナーはその関数を呼び出してiframeの現在の高さを取得する必要があります。

于 2011-11-08T09:30:23.190 に答える