javascript - 单击 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 中加载新页面将导致 load 事件在加载新页面时在 iframe 上触发。然后你可以调整 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);
}