当iframe内容的高度发生变化时，自动调整iframe高度（同一个域）

5 回答

• 1

  实际上你应该通过访问父窗口和更改iframe的高度来从iframe中做到这一点 .

  因为iframe中的文档通常更好地知道它的主体是否改变了它的大小（你实际上可以将它绑定到像body.onload这样的东西而不是使用间隔来检查iframe中是否有变化） .

  回复于 2024-04-29T16:57:27+08:00
• 7

  据我所知，没有一种非常自然的方法，但有一些选择 .

  setInterval（）

  您可以使用 setInterval() 重复检查iframe的内容高度，并根据需要进行调整 . 这很简单，但效率低下 .

  事件监听器

  例如，iframe中的内容的任何更改都会从iframe外部添加内容，而"add"可能是由按钮点击触发的 . 这可能适合您：Live demo here (click).

  var myIframe = document.getElementById('myIframe');
  
  window.addEventListener('click', resizeIframe);
  window.addEventListener('scroll', resizeIframe);
  window.addEventListener('resize', resizeIframe);
  
  myIframe.contentWindow.addEventListener('click', resizeIframe);
  
  function resizeIframe() {
    console.log('resize!');
  }
  

  变异观察者

  此解决方案适用于所有最新的浏览器 - http://caniuse.com/mutationobserver

  Live demo here (click).

  这很简单，应该 grab 相关的变化 . 如果没有，您可以将它与上面的事件监听器解决方案结合起来，以确保更新内容！

  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);
  }
  

  荣誉奖：溢出/下溢事件 .

  Read about it here（有很多东西） .

  和see my demo here（在IE 11中不起作用！） .

  这个 was 是一个很酷的解决方案，但它使用上述解决方案之一，即使我不得不为旧浏览器回退1秒 setInterval ，只是因为它比这个解决方案简单得多 .

  回复于 2024-04-29T16:57:27+08:00
• 6

  我编写了一个使用mutationaObserver和eventListners的小型库，其后退为IE8-10的setInterval，适用于同一域和跨域 . 它可以调整高度和宽度 .

  http://davidjbradshaw.github.io/iframe-resizer/

  回复于 2024-04-29T16:57:27+08:00
• 0

  iFrame视图

  <script type="text/javascript">
      var height = $("body").outerHeight();
      parent.SetIFrameHeight(height);
  </script>
  

  主视图

  <script type="text/javascript">
      SetIFrameHeight = function(height) {
          $("#iFrameWrapper").height(height);
      }
  </script>
  

  回复于 2024-04-29T16:57:27+08:00
• 4

  您可以使用自定义事件在 iframe 和父级之间发送信号 .

  在 iframe ：

  if (window.parent !== window) {
    window.oldIframeHeight = 0;
    window.setInterval(function() {
        var currentHeight = document.body.offsetHeight;
        if (currentHeight !== window.oldIframeHeight) {
            window.parent.postMessage(currentHeight.toString(), "*");
            window.oldIframeHeight = currentHeight;
        }
    }, 100)
  }
  

  然后，在父母：

  window.addEventListener("message", function (e) {
      var h = parseInt(e.data, 10);
      if (!isNaN(h)) {
          $('#iframe').height(h)
      }
  }, false);
  

  回复于 2024-04-29T16:57:27+08:00