內容更改時如何調整跨域iframe的大小？

Question

我想在我的網站上嵌入一個博客，正如我所看到的，最友好的方式是通過一個tumblr博客並通過iFrame嵌入它。 唯一的問題是：在令人興奮的過程中，我向博客添加了一個“更多”按鈕，因此不必滾動瀏覽每篇文章的全部內容，但是現在當用戶單擊“更多”按鈕時，“內容” iFrame的邊界溢出”，我似乎找不到根據內部內容不斷更新hieght的方法。 我不太了解Js，但是發現了兩個腳本：

選項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”腳本庫。 我從示例文件中復制了這段代碼（“我不太了解Js ......”）：
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>

第一個選項工作正常，直到我點擊閱讀更多按鈕...第二個選項，如果我知道正確，有能力更新iFrame的高度，如果內容的高度發生變化，所以我試圖使用它，但它沒有與tumblr博客一起使用...它可與其他頁面一起使用，但是如果我嘗試加載“ Cikkek”頁面，則iFrame不會重新調整其大小，其高度與博客之前加載的頁面相同。

所以我請你幫我解決這個調整大小的問題，我真的很感激任何幫助，謝謝你的時間。

網頁： http ： //fiktiv.dyndns.org/site/
（如果它不可用請原諒我！我正在我的筆記本電腦上托管這個，直到它沒有完全准備好，但我將盡力在接下來的幾天內將其提供。）

科瓦奇·萊文特

Answer 1

我找到了，不是最終的，而是“對我來說足夠好”的答案：我在服務器上創建了一個“cikkek.php”並用include包含了tumblr博客，現在它可以正常使用選項2 （但是按鈕位於帖子的右下方不起作用，如果我點擊“閱讀更多”按鈕，它會調整大小。

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