javascript - HTML - 页面的全高，包括滚动之外的内容

Question

我需要找出页面的高度，包括超出隐藏的垂直滚动条的内容。我搜索了 google 和 stackoverflow QA，但这些解决方案不适用于我的情况。

一个条件是我不能更改 HTML 或 BODY css。 基本上我正在为 firefox 扩展尝试这个

所有的方法都是

offsetHeight, scrollHeight, getComputedValue

在 noupe.com 网站上无法正常工作。每次我尝试查找 body 的上述属性时，即使页面高度超过 4000 像素，它也只会给我 18 像素。

尝试过 jQuery 的

$(document).height();

也没用。

这就是我找出页面高度的方法:

var x = window.content;
var pageBody = x.document.getElementsByTagName("body")[0];    
var my_pageheight = parseInt(x.document.defaultView.getComputedStyle(pageBody, "").getPropertyValue("height"));

这在 noupe.com 上给了我 18px，但在其他网站上效果很好。 任何线索我怎样才能使这项工作。

谢谢

Answer 1

怎么样

$('body').height();

---

我本来打算发布一个解释，但下面评论中的 Alex 替我做了，所以我想我只是发布一些链接到可以找到更多相关信息的地方:

http://dev.opera.com/articles/view/35-floats-and-clearing/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

还要记住，因为我们正在处理 body 元素，所以我们不能使用 overflow: hidden 方法(这会从页面中删除滚动条)。

此外，谢天谢地，您可以注入(inject)新元素，我正在考虑使用它作为解决方案...

var max = 0;

$('body *').each(function(){
    var current = $(this);
    if ((current.offset().top + current.height()) > max) max = current.offset().top + current.height();
});

可能算作我写过的最糟糕的 Javascript 之一，因为你说你不能再添加 CSS 或 HTML。以下(假设您仍然需要它)应该有效:

$('<div />').css({
    'height': 0,
    'width': 0,
    'visibility': 'hidden',
    'clear': 'both'
}).appendTo('body');

$('body').height();