无法弄清楚为什么 Chrome/Safari 无法在此处获取 ScrollHeight答案

【问题标题】：Can't figure out why Chrome/Safari can't get the ScrollHeight right here无法弄清楚为什么 Chrome/Safari 无法在此处获取 ScrollHeight
【发布时间】：2010-10-03 12:04:58
【问题描述】：

我刚刚问了一个问题，为什么某些 js 代码不能 100% 在 Chrome 和 Safari 中运行，但经过更多故障排除后，我想我发现这是我应该发布的问题。

我有一个页面，其中有一个表单。此表单的目标是同一页面上的 iframe。 iframe 是动态的，并且基于 php。

这是我的 php iframe 内容的底部：

<body onload="parent.resize_iframe(document.body.scrollHeight)">
<?php echo $display_table; ?>

如您所见，我调用了一个函数来调整 iframe 在主页面（父页面）中的高度。

这很好用，实际上它确实会调整大小，但是在 Chrome 和 Safari 中，调整大小设置的高度“高于”应有的高度。因此，如果高度为 500 像素，Chrome 和 Safari 会将其设置为 2000 像素左右，这是 iframe 文档高度的最大值。

这是为什么？一种想法可能是在将 scrollHeight 发送到 resize 函数之前 body 没有完全加载？

有没有办法让它等到文档完全加载？

让我感到困惑的一件事是，当我单击主页上的链接，然后回击时，页面调整大小效果很好，并且设置为 500 像素，即使在 Chrome/Safari 中也应该如此。但那是我在浏览器中点击“返回”的时候。

嗯，我真的不明白，所以请在这里帮助我。

谢谢

【问题讨论】：

你能显示resize_iframe吗？
Webkit 浏览器通常会混淆 <body> 元素。您可能会发现在<body> 中嵌套<div> 并对其进行操作是否效果更好。

标签： javascript jquery google-chrome safari webkit

【解决方案1】：

document.body.scrollHeight 将始终返回 chrome 中的两个值之一：

如果文档内容长于窗口高度，则返回内容高度

如果文档比窗口的高度短，则返回窗口的高度。

听起来很像您在 iframe 上设置了高度。当 iframe 中的内容加载时，它会将 iframe 视为窗口。因此，如果 iframe 的高度设置为 2000，而您的内容高度仅为 500，则 chrome 将返回 2000 的 offsetheight。

如果是这种情况，最简单的做法是将 iframe 的高度设置为 1px。（或自动）

另一个选项（如尖点的 um..points 指出的那样）是您可以在包含所有内容的主体之后创建一个包装器 div。然后，您可以获取该 div 的高度并将其返回给您的父函数

关于这个问题：

有没有办法让它等待直到文档完全加载？

答案是肯定的，而且您已经这样做了。由于您在 onload 时调用 parent.resize_iframe，因此在所有 HTML、JS、CSS 和图像都加载到屏幕上之前，该函数不会被调用。但是应该指出的是，使用 body 标签 onload 函数有一些缺点。一，它是否必须在调用 onload 之前加载所有图像。其次，如果有人重新绑定到 window.onload 您的函数将永远不会被调用。如果您有兴趣了解更多关于 onload 和处理它的方法，请查看此链接http://www.webreference.com/programming/javascript/onloads/

【讨论】：