使用 srcdoc 属性自动调整 iframe 的大小

Question

我正在尝试使用带有 srcdoc 属性的 iframe 元素在页面上显示电子邮件。

目前我正在使用此代码来调整 iframe 的大小。

$(document).ready(function() {

  $('iframe').each(function(index, el) {

    el.onload = function() {

      el.style.height = el.contentWindow.document.body.scrollHeight + 'px';

    }

  })

});

但它并不总是有效。有时内容的大小会被正确调整，有时则不会。

我见过这样的解决方案https://medium.com/better-programming/how-to-automatically-resize-an-iframe-7be6bfbb1214，但据我了解，这需要我在 srcdoc 内容中注入一些 js 并然后监听 window.onmessage 事件。我觉得这是一个麻烦的解决方案。这是唯一的解决方案，还是有更好的方法来处理这个问题？

Answer 1

通过使用 CBroe 提到的 Readystate，我能够获得可靠的结果。$('iframe').each(function(index, el) {  $(el).ready(function(){    el.style.height = el.contentWindow.document.body.scrollHeight + 'px';  });});