コンテンツが変更されたときにクロスドメインiframeのサイズを変更するにはどうすればよいですか？

Question

私は自分のウェブサイトにブログを埋め込みたいと思っています。私が見ているように、ユーザーフレンドリーな方法は、tumblrのブログをクイズし、iFrameで埋め込むことです。唯一の唯一の利点はこれです：私は自分のブログにもっと多くのボタンを追加しましたので、すべての投稿の全長をスクロールする必要はありませんが、ユーザーが「もっと読む」ボタンをクリックすると、 iFrameの境界をオーバーフローさせてしまい、内部のコンテンツに応じて常にハイゲイトを更新する方法が見つからないようです。私は非常によくJsのを知りませんが、私は2つのスクリプトが見つかりました：

オプション1： のiFrameホスティングページ：

<script type="text/javascript"> 
      // Create IE + others compatible event handler 
      var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
      var eventer = window[eventMethod]; 
      var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

      // Listen to message from child window 
      eventer(messageEvent, function (e) { 
       document.getElementById('content').style.height = e.data + 'px'; 
      }, false); 
</script> 

オプション1： Tumblrのページを：

<script type="text/javascript"> 
    function postHeightMessage() { 
     var actual_height = document.getElementById('content').scrollHeight; 
     parent.postMessage(actual_height + 50, "*"); 
    } 

    function adjust_iframe_height() { 
     // Reset iframe height (for Chrome and Safari) 
     var isChrome = /Chrome/.test(navigator.userAgent); 
     var isSafari = /Safari/.test(navigator.userAgent); 
     if (isChrome || isSafari) { 
     parent.postMessage(200, "*"); 
     } 

     // Send actual iframe height 
     setTimeout(postHeightMessage, 100); 
    } 
</script> 

オプション2：
"davidjbradshaw"のthisスクリプトライブラリを使用しました。
ページをホスティングしているのiFrame：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="/site/iframe-resizer-master/js/iframeResizer.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

      iFrameResize({ 
       log      : true,     // Enable console logging 
       enablePublicMethods  : true,     // Enable methods within iframe hosted page 
       resizedCallback   : function(messageData){ // Callback fn when resize is received 
        $('p#callback').html(
         '<b>Frame ID:</b> ' + messageData.iframe.id + 
         ' <b>Height:</b> '  + messageData.height + 
         ' <b>Width:</b> '  + messageData.width + 
         ' <b>Event type:</b> ' + messageData.type 
        ); 
       }, 
       messageCallback   : function(messageData){ // Callback fn when message is received 
        $('p#callback').html(
         '<b>Frame ID:</b> ' + messageData.iframe.id + 
         ' <b>Message:</b> ' + messageData.message 
        ); 
        alert(messageData.message); 
       }, 
       closedCallback   : function(id){ // Callback fn when iFrame is closed 
        $('p#callback').html(
         '<b>IFrame (</b>' + id + 
         '<b>) removed from page.</b>' 
        ); 
       } 
      }); 


</script> 

Tumblrのページ：

<script src="../js/iframeResizer.contentWindow.min.js" type="text/javascript"></script> 
<script src="http://fiktiv.dyndns.org/site/iframe-resizer-master/js/iframeResizer.contentWindow.min.js" type="text/javascript"></script> 
<div style="clear: both; display: block;"></div> 

を私は、サンプルファイル（ "私は非常によくのJsを知らない..."）から、このコードをコピー

最初のオプションは、もっと読むボタンをクリックするまでうまくいきます... 2番目のオプションは、正しく知っていれば、コンテンツの高さが変更されたのでiFrameの高さを更新できます。しかし、それは動作しませんtumblr blog ...それは他のページでも動作しますが、「Cikkek」ページを読み込もうとすると、iFrameはブログの前に読み込まれたページと同じ高さになりません。

このサイズ変更の問題を解決するためにお手数をおかけしておりますが、本当にありがとうございました。ありがとうございました。

Webページ：！http://fiktiv.dyndns.org/site/
（それが利用できない場合はご容赦ください、それは完全に準備ができていないのですまで、私は私のラップトップでこれをホストしているが、私は、の次のカップルでそれを利用できるように全力を尽くします日）

コバチレベンテ私は、究極の、しかし答えは「私のために十分に」見つかりません

Answer 1

：。私は、サーバー上の「cikkek.php」を作っ と含んでtumblrのブログと呼ばれますそして今それは正常に動作しますオプション2（ただし、ポストの右下にあるボタンは機能しません。「もっと読む」ボタンをクリックするとサイズが変更されます）。

<?php 
    include 'http://fiktivcikkek.tumblr.com/'; 
?>