Question

我需要找到一种方法来获取Google Chrome中的实际页面大小。在其他浏览器中，可以使用window.scrollMaxY轻松完成。 Chrome不支持此属性。到目前为止，我发现的所有提议的工作都没有按预期工作。这是一个简单的测试页面（将其插入到空的html / body元素中）：

<input type="button" name="size" value="size" onclick="alert(window.scrollMaxY)">
<div id="content" style="width:300px;height:500px;background-color:green"></div>

我们有一个高度为500的div。在FireFox中，无论浏览器窗口的大小是多少，代码都会返回页面的实际高度，即500 +边距值和按钮的值。在Chrome中，我们需要用某些内容替换window.scrollMaxY。我已尝试在Net属性（document.body，document.documentElement，window.getComputedStyle等）中提到的所有内容，但没有人返回文档的实际高度，当Chrome窗口大于文档时：在这种情况下，Chrome提供的任何属性都会返回窗口的高度，而不是页面的高度。例如，如果我们的屏幕高度为768像素，Chrome窗口最大化，则Chrome会报告页面高度大约为700而不是500。问题是，如何在Chrome中获取实际页面大小。随意使用指定的测试页面测试您的命题，用任何必要的东西替换alert的参数。

自答案：

经过深入调查后，我发现问题的原因是网页本身，特别是页面开头缺少的DOCTYPE标记。没有DOCTYPE Chrome可以在不同的模式下工作，并将主体扩展到整个窗口（正如zapthedingbat在他的回答中所写）。因此，正确的网页标记可以解决问题，但只有在页面是我们自己的页面的情况下才有可能。对于可能没有DOCTYPE的其他人的互联网网页，问题将持续存在。由于我需要使用外部网页，我需要以某种方式解决这个问题，但这是另一个问题。

我希望这些信息可能对那些偶然发现同一问题并且无法弄清楚原因的人有所帮助。

Answer 1

我猜你使用$(document).ready()而不是$(window).load()？

我先给$(window).load()一个，因为它会在 所有内容 完成加载后执行，而不仅仅是DOM。

刚刚在Chrome中对此进行了测试：

$(window).load(function(){
    console.log($('body').height());
});

它返回了500。

Answer 2

尝试使用以下代码;

alert(document.body.offsetHeight);

这是非常友好的交叉浏览器，它将为您提供内容的实际高度（而不是视口！）。

在极少数情况下，如果你体内只有'position：absolute'元素，这可能会“失败”。但那将是预期的情况，因为'position：absolute'元素超出了正常的布局。

Answer 3

document.height会以chrome为单位显示文档的高度。这就是你要找的东西吗？

修改

在chrome中，主体会扩展以填充视口。如果要获取内容的高度，则将主体的内容包装在单个元素中，并读取此包装元素的offsetHeight属性，或迭代主体的每个childNode并返回最大的offsetHeight + offsetTop属性。

Answer 4

问题似乎很简单，但有一种情况是所有标准方法都无法按预期工作。问题的原因是开头缺少DOCTYPE标记的网页。没有DOCTYPE现代浏览器在特殊（怪异）模式下工作，并将主体扩展到整个窗口。因此，正确的网页标记可以解决问题，但不保证来自互联网的其他人的页面（并且例如通过浏览器扩展进行处理）。解决方案是动态添加DOCTYPE，如此处所示 - jquery-change-doctype。对于BackCompat模式下的文档，DOCTYPE是动态添加的，并且只有在此document.documentElement.scrollHeight在Chrome中按预期工作后才会生效。

检测Google Chrome中的实际网页大小

4 个答案: