javascript - 源页面不会随着 iframe 高度的变化而调整大小

Question

我正在使用一个简单的 JavaScript 代码来根据正在加载的内容调整 iframe 的大小（它都在域中）。但是我遇到的情况是；当 iframe 为包含大量需要在源页面上滚动的内容的页面调整大小时，然后当您转到内容少得多的页面时，源页面保持在相同的高度，因此下面有很多可怕的空滚动空间内容，我似乎无法阻止这种情况的发生。

是否有额外的代码来确保源页面使用 iframe 调整大小？

JavaScript

 function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
 }

Answer 1

你有几个选择。

1. 使用 offsetHeight 而不是 scrollHeight。
2. 在调整大小功能开始时将高度降低到 1px，以便它可以“增长”到新的更小尺寸。

这两种选择都有缺点。选项一不会在您的身体上包含任何边距，因此最好将其设置为 8px，然后将高度添加 16px。选项二会产生一点闪烁。