クロスドメインURLでiframeのサイズを変更する方法

Question

iframe onload関数でurlを読み込もうとしていることを示すことができます。iframeをスクロールバーなしで表示して内容に調整しますが、親ページは内容に応じてスクロールします誰も教えてくださいどのようにクロスドメインのURLでiframeのサイズを変更するには？

おかげでその親に現在のiframeの高さを送信するために、その内容に基づいてiframeのサイズを変更するために、あなたはキャンpostMessage使用で

Answer 1

。

iFrameに含まれるページは、postMessageを使用して現在の高さを含むページに送信する必要があります。 インクルードするページはそのメッセージをリッスンし、それに応じてiframeの高さを変更する必要があります。

含まれるページ内のコードは次のようになります：

function getBottom() { 
    var max = jQuery("body").height(); 
    //Your additional calculations go here 
    return max; 
} 

function updateHeight() { 
    sendHeightToParent(); 
    setTimeout(updateHeight, 500); 
} 

function sendHeightToParent() { 
    var messageObject = { 
     "type":"size", 
     "version":"1.0.0", 
     "params":{ 
      "height": getBottom() 
     } 
    }; 

    //YOURTARGET is the target page if known. Otherwise use "*" 
    parent.postMessage(JSON.stringify(messageObject), "YOURTARGET"); 
} 

//Only possible if html5 post message is available 
if (typeof parent.postMessage == 'function') { 
    jQuery().ready(function() { 
     sendHeightToParent(); 
     setTimeout(updateHeight, 500); 
    }); 
} 

親が、イベントをリッスンし、それに応じIFRAMEを更新します。

bodyタグから

//Only possible if html5 post message is available 
if (typeof parent.postMessage == 'function') { 
    window.addEventListener("message", function (e) { 
     obj = JSON.parse(e.data); 
     if (obj.type == 'size') { 
      myFrame = document.getElementById('YouIFrameId'); 
      myFrame.stye.height = obj.params.height + "px"; 
     } 
    } 
}