iframe 在 chrome/safari 中使用滚动高度调整大小答案

【问题标题】：iframe resizing with scrollheight in chrome/safariiframe 在 chrome/safari 中使用滚动高度调整大小
【发布时间】：2011-03-04 10:37:55
【问题描述】：

我正在尝试根据 iframe 的内容调整 iframe 的大小（放大或缩小）。单击每个页面后，都会调用一个方法来调整大小。

在 Chrome 中，我可以使 iframe 更大，但不能更小。 document.body.scrollHeight 始终是最大的值。

因此，如果一个大页面设置#iframe.height = '620px'，并且有人点击内容较少页面的链接，scrollHeight 将保持在 620px 而不是减小。

在 Chrome/Safari 中处理此问题的正确方法是什么？

【问题讨论】：

【解决方案1】：

在询问 iframe 内文档的高度之前，您应该将 iframe 对象的高度设置为“自动”。像这样的：

objIframe = document.getElementById('theIframeId');    
objIframe.style.height = 'auto';

现在：

document.body.scrollHeight

返回文档的实际高度。

【讨论】：

太棒了！已经为此奋斗了好几天！
如果其他人遇到这个问题，为我解决的问题是为 Firefox 设置“document.body.scrollHeight”，为 Chrome 设置“document.documentElement.scrollHeight”以及其他任何东西......我的例子跨域使用 postMessage if(isFirefox) { e.source.postMessage('height:' + document.body.scrollHeight, e.origin); } else { e.source.postMessage('height:' + document.documentElement.scrollHeight, e.origin); }
感谢您的回答，我已将其包含在我的 iFrame 库中 github.com/davidjbradshaw/iframe-resizer
@nitsuj 只是好奇，您是如何决定在给定浏览器中收听或发送哪条消息（body.scrollHeight 与 documentElement.scrollHeight）？
在我的情况下不是 iframe，而是内部 div 需要是 height:auto

【解决方案2】：

您是否尝试改用document.documentElement.scrollHeight？

【讨论】：

【解决方案3】：

根据规范，Element.scrollHeight 会将值四舍五入为整数。如果您需要准确的小数值，请改用Element.getBoundingClientRect()。

【讨论】：