javascript - jQuery 返回错误的文档高度

标签 javascript jquery css cocoa

我在 Cocoa (Mac) 中使用 Webview,我正在尝试获取文档的正确高度。只是做正常的事情,webview.mainFrame.frameView.documentView.bounds.size.height似乎在所有情况下都能正常工作,除了我刚刚发现的一个:

http://www.medium.com

当我尝试在这个站点上执行此操作时,我得到的文档高度约为 500,而实际文档高度更接近 2000+,因为我必须滚动多个屏幕才能到达最后。

我尝试求助于评估 web View 中的 javascript 以获得实际高度,使用此处列出的方法:How to get height of entire document with JavaScript?

但是这些也给出了非常不正确的值,就像我最初的方法一样。甚至转到该页面,加载 jQuery,然后执行 $(document.body).height() 之类的操作也会给出一个非常不正确的值。有人知道发生了什么事吗?有没有其他方法可以获得可靠的文档高度?

我注意到检查员在 chrome 中报告的高度也变得困惑了。在这些屏幕截图中,您可以看到报告的 document.body 高度小于其子节点之一的高度。

medium.com body height in chrome inspector medium.com body->child div height in chrome inspector

最佳答案

这个页面的内容如下:

HTML 和正文(以及一些底层元素)都设置为 100% 高度,因此它们完全适合浏览器窗口。在我的例子中,它大约有 500 像素高。他们如何建立这种滚动呢?好吧...有一个带有 overflow:auto 的 div,实际内容要多得多(大约 4000 像素)

所以你实际上并没有滚动整个页面,而是滚动这个特定的 div(查看 layout-foreground scrolling-region)

在这种情况下文档的高度是500px是完全正确的,你要找的高度可以通过控制台这样找到:

document.querySelectorAll(".scrolling-region")[0].scrollHeight

这将为您提供 4133px 的高度,在这种情况下,这是页面的实际高度。

干杯:)

关于javascript - jQuery 返回错误的文档高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21131957/

相关文章:

javascript - 如何清除表格中显示的不需要的 td

javascript - 向我展示代码而不是实际运行它

javascript - 错误 : TypeError: Object has no method 'set'

javascript - 有没有办法在 Javascript 或 jQuery 中使用字符串作为比较运算符?

javascript - 根据窗口宽度更改javascript

css - 是否可以将输入复选框设为 Bootstrap 字形图标?

javascript - Angularjs 翻译提供者前缀问题

javascript - 如果服务器不过滤JSONP的回调参数,是否会存在安全问题?

javascript - 增加智能手机和 iPhone 网站的字体大小

css - 使用 mixins 返回媒体查询