当前位置: 首页 > 面试题库 >

如何使用JavaScript获取整个文档的高度?

浦出野
2023-03-14
问题内容

有些文档我无法获取文档的高度(将某些内容绝对定位在最底部)。另外,在这些页面上的底部填充似乎没有任何作用,但在高度会返回的页面上却没有作用。案例:

在Fandango上, jQuery的$(document).height();返回正确值
document.height返回0 document.body.scrollHeight返回0

关于平装交换:
jQuery的$(document).height();TypeError:$(document)为null
document.height返回错误的值 document.body.scrollHeight返回错误的值

注意:如果有一些窍门,我具有浏览器级别的权限。


问题答案:

文档大小是浏览器兼容性的噩梦,因为尽管所有浏览器都公开了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小书签进行的快速测试将为两个引用的页面返回正确的高度,代码示例也是如此。

请注意,在文档准备好之前测试文档的高度将始终为0。此外,如果您在其中加载了更多内容,或者用户调整了窗口的大小,则可能需要重新测试。如果在加载时需要此事件,请使用onload或文档就绪事件,否则,只要需要此编号,就进行测试。



 类似资料:
  • 问题内容: 如何获取JavaFx中Webview控件的文档高度? 问题答案: 您可以使用以下调用获取WebView中显示的文档的高度: 演示呼叫使用情况的完整应用程序: 上面的答案的来源:Oracle JavaFX论坛WebView配置线程 。 针对基于Java的API的相关功能的相关问题跟踪器请求: RT-25005 WebView的自动首选大小。

  • 问题内容: JS中是否有办法以字符串形式获取 html 标记内的整个HTML ? 问题答案: MS 不久前添加了和属性。 根据MDN的说明,Firefox 11,Chrome 0.2,InternetExplorer 4.0,Opera 7,Safari 1.3,Android,Firefox Mobile 11,IE Mobile,Opera Mobile和SafariMobile支持。在DOM

  • 问题内容: 有没有办法从完整路径中获取最后一个值(基于’'符号)? 例: 在这种情况下,我只想了解JavaScript的完整路径。 问题答案: 这将处理路径中的\ OR /

  • 问题内容: 我曾经用过,但是抛出了一个错误…有什么办法得到所有东西? 问题答案: 您可以尝试: 如果您还想捕获html标签,可以将它们连接到html,如下所示:

  • 问题内容: 我有这个HTML代码: 问题是我收到消息“错误”。这意味着iframe的文档未正确获取,而GetDoc函数实际返回的是父文档。 如果您告诉我在哪里犯错,我将不胜感激。(我想将文档托管在IFrame中。) 谢谢。 问题答案: 您应该可以使用以下代码访问IFRAME中的文档: 但是,如果框架中的页面是从其他域(例如google.com)加载的,则将无法执行此操作。这是因为浏览器的“相同来源

  • 问题内容: 关于如何在不使用jQuery的情况下获得div高度的任何想法? 我正在搜索Stack Overflow这个问题,似乎每个答案都指向jQuery的。 我尝试了类似的方法,但是即使我的div具有CSS 并在CSS中进行了设置,它也没有返回任何内容。 问题答案: 要么 包括填充。 包括填充,scrollBar和边框。