Nic*_*Nic 309 javascript
有些文件我无法获得文件的高度(绝对位于最底层).此外,填充底部似乎在这些页面上什么也不做,但在高度将返回的页面上执行.案例:
http://fandango.com
http://paperbackswap.com
在Fandango上
jQuery的$(document).height();返回正确值
document.height返回0
document.body.scrollHeight返回0
On Paperback Swap:
jQuery的$(document).height();TypeError:$(document)为null
document.height返回不正确的值
document.body.scrollHeight返回不正确的值
注意:如果有一些技巧,我有浏览器级权限.
Bor*_*gar 632
文档大小是浏览器兼容性的噩梦,因为尽管所有浏览器都公开clientHeight和scrollHeight属性,但它们并不都同意这些值的计算方式.
对于您如何测试正确的高度/宽度,过去常常有一个复杂的最佳实践公式.这涉及使用document.documentElement属性(如果可用)或回退到文档属性等.
获得正确高度的最简单方法是获取文档或documentElement上的所有高度值,并使用最高的值.这基本上就是jQuery的作用:
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
使用Firebug + jQuery bookmarklet进行快速测试会返回两个引用页面的正确高度,代码示例也是如此.
请注意,在文档准备好之前测试文档的高度将始终为0.此外,如果您加载更多内容,或者用户调整窗口大小,您可能需要重新测试.如果您在加载时需要,请使用onload或文档就绪事件,否则只需在需要时进行测试.
Mar*_*zzo 170
这是一个非常古老的问题,因此有许多过时的答案.截至2017年,所有浏览器都遵守该标准.
2017年答案:
document.body.scrollHeight
编辑:以上内容不考虑<body>标签上的边距.如果您的身体有边距,请使用:
document.documentElement.scrollHeight
Mim*_*imo 28
你甚至可以用这个:
var B = document.body,
H = document.documentElement,
height
if (typeof document.height !== 'undefined') {
height = document.height // For webkit browsers
} else {
height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}
或者以更jQuery的方式(因为你说jQuery不说谎):)
Math.max($(document).height(), $(window).height())
And*_*kyi 22
完整文件高度计算:
为了更通用并找到任何文档的高度,您可以通过简单的递归找到当前页面上最高的DOM节点:
;(function() {
var pageHeight = 0;
function findHighestNode(nodesList) {
for (var i = nodesList.length - 1; i >= 0; i--) {
if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
pageHeight = Math.max(elHeight, pageHeight);
}
if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
}
}
findHighestNode(document.documentElement.childNodes);
// The entire page height is found
console.log('Page height is', pageHeight);
})();
您可以在示例站点(http://fandango.com/或http://paperbackswap.com/)上测试它,并将此脚本粘贴到DevTools控制台.
注意:它正在使用Iframes.
请享用!
2017年的正确答案是：
document.documentElement.getBoundingClientRect().height
与此方法不同的document.body.scrollHeight是考虑了正文边距。它还给出了分数高度值，这在某些情况下很有用
确定文档大小的"jQuery方法" - 查询所有内容,获取最高价值,并希望获得最佳 - 在大多数情况下都有效,但并非在所有情况下都有效.
如果您确实需要文档大小的防弹结果,我建议您使用我的jQuery.documentSize插件.与其他方法不同,它实际上在加载时测试和评估浏览器行为,并根据结果从那里查询正确的属性.
这一次测试的对性能的影响是最小的,和插件返回,甚至怪异的情景正确的结果-不是因为我这么说,但由于大规模的,自动生成测试套件实际验证它.
因为插件是用vanilla Javascript编写的,所以你也可以在没有jQuery的情况下使用它.
| 归档时间： |
|
| 查看次数： |
418749 次 |
| 最近记录： |