javascript - 内容更改时如何调整跨域 iframe 的大小？

Question

我想将博客嵌入到我的网站中，据我所知，最用户友好的方法是定制一个 tumblr 博客并通过 iFrame 嵌入它。唯一的问题是:在定制过程中，我在博客中添加了一个“阅读更多”按钮，因此不必滚动每篇文章的完整长度，但现在当用户单击“阅读更多”按钮时，内容“溢出”iFrame 的边界，我似乎找不到一种方法来根据内部内容不断更新高度。我不太懂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:
我用过this来自“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/';
?>