Question

我想在我的网站上嵌入一个博客，正如我所看到的，用户最友好的方式是通过一个tumblr博客并通过iFrame嵌入它。唯一的问题是：在coustomizing procces期间我添加了一个更多按钮到我的博客，所以没有必要滚动每个帖子的全部长度，但现在当用户点击te“阅读更多”按钮时，内容“溢出“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”的this脚本库。我从示例文件中复制了这段代码（“我不太了解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/
（如果它不可用请原谅我！我在我的笔记本电脑上托管这个，直到它没有完全准备好，但我会尽力在接下来的几天内将它提供。） < / p>

KovácsLevente

Answer 1

我发现，不是最终的，但对我来说足够好了＃34;回答：我做了一个＆＃34; cikkek.php＆＃34;在服务器上并使用include调用tumblr博客，现在它可以正常使用 选项2 （但是帖子右下角的按钮不起作用，如果我点击＆＃34;阅读更多＆＃34;按钮），它会调整大小。

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

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

1 个答案: