如何根据其内容动态设置iframe高度

Question

我想根据内容的高度设置iframe的高度，下面的代码适用于本地链接，但是我想动态地进行操作。 请帮忙。

<iframe  id="frameDemo" src="https://myvook.blogspot.com"></iframe>      
<script>    
$(document).ready(function() {       
$( "#frameDemo" ).on('load', function() {     
    var mydiv = $(this).contents().find("body");    
    var h = mydiv.height();    
    $("#frameDemo").height(h);    
 });    
});    

Answer 1

按照Rory的说法，无法在加载iframe之前设置iframe的高度，因为您将从其他域提取内容。

但是，可以在下载内容后设置iframe的高度。这是我的解决方法：

function noteContentIframeLoaded(iframeId) {
  // See http://stackoverflow.com/a/5788723 for how to implement this function
  var iframeElement = $("#" + iframeId)[0];
  setTimeout(function() {
    setIframeHeight(iframeElement);
  }, 10);
}

function setIframeHeight(iframe) {
  if (iframe) {
    if (iframe.contentWindow || iframe.contentDocument) {
      var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
      if (iframeWin.document.body) {
        iframe.height = (iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight);
      }
    }
  }
}