单击iframe（同一域）中的链接时自动调整iframe大小

Question

以下是我到目前为止对javascript所拥有的内容并且它的工作方式正如我对主要商店页面也需要它。但是我想要做的是每次点击Iframe中的链接时都要调整iframe的大小。请有人帮忙吗？。

<script type="text/javascript">
function autoResize(id){ var newheight; var newwidth;

if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document.body.offsetHeight;
    newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
}
    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px"; 
}
</script>

提前再次感谢你:)

Answer 1

当前问题最简单的解决方案是为iframe的加载添加一个事件监听器。单击链接以在iframe中加载新页面将导致在加载新页面时在iframe上触发load事件。然后你可以调整iframe的大小。的 Live demo (click).

var myIframe = document.getElementById('myIframe');

myIframe.addEventListener('load', function() {
  setIframeHeight();
});

在较新的浏览器上，您可以使用Mutation Observers为其中发生的大多数更改调整iframe的大小。这是一个例子。的 Live demo (click).

var $myIframe = $('#myIframe');
var myIframe = $myIframe[0];

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

myIframe.addEventListener('load', function() {
  setIframeHeight();

  var target = myIframe.contentDocument.body;

  var observer = new MutationObserver(function(mutations) {
    setIframeHeight();
  });

  var config = {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  };
  observer.observe(target, config);
});

myIframe.src = 'iframe.html';

function setIframeHeight() {
  $myIframe.height('auto');
  var newHeight = $('html', myIframe.contentDocument).height();
  $myIframe.height(newHeight);
}