简单的跨浏览器方式在JavaScript中获取WHOLE页面宽度，而不仅仅是视口宽度？
[英]Simple, cross-browser way to get the WHOLE page width in JavaScript, not just the viewport width?
问题描述
I've seen lots of posts that talk about the getting width of the browser viewport, but what I want to find is essentially the width of the browser viewport if it were just wide enough to avoid a horizontal scrollbar. 
我已经看过很多关于浏览器视口获取宽度的帖子，但我想要找到的实际上是浏览器视口的宽度，如果它只是宽度足以避免水平滚动条。
I'm using the Prototype JS framework and have looked at various options using that and using pure JavaScript. 我正在使用Prototype JS框架，并使用纯JavaScript来查看各种选项。 For example: 例如：
-
$(document.body).getWidth()anddocument.body.clientWidthreturn the viewport width excluding margins.$(document.body).getWidth()和document.body.clientWidth返回视口宽度，不包括边距。 -
document.documentElement.clientWidthandwindow.innerWidthreturn the viewport width including margins.document.documentElement.clientWidth和window.innerWidth返回包含边距的视口宽度。
I've tried to be sneaky too: I absolutely-positioned a known-width DIV against the right-hand edge of the page (ie CSS right:0 ) with the intention of getting its left-edge position, but that actually gets aligned with the right-edge of the viewport. 我也试图偷偷摸摸：我绝对将一个已知宽度的DIV放在页面的右边缘（即CSS right:0 ），目的是获得它的左边位置，但实际上是对齐的与视口的右边缘。
The only thing I've found that works is to use JavaScript to scroll right until it won't scroll anymore (simply using scrollBy(1000000, 0) will usually be enough, but a while loop would obviously be more reliable), then get the horizontal scroll offset and add that to the viewport width. 我发现唯一有效的方法是使用JavaScript向右滚动直到它不再滚动（简单地使用scrollBy(1000000, 0)通常就足够了，但是while循环显然会更可靠），然后得到水平滚动偏移并将其添加到视口宽度。 But I don't want to scroll the window: I want to inspect it somehow! 但我不想滚动窗口：我想以某种方式检查它！
Any suggestions appreciated, even jQuery ones as at least then I can see how jQuery does it. 任何建议都赞赏，即使是jQuery，至少我可以看到jQuery是如何做到的。
Here's a simple example showing that document.body.scrollWidth doesn't work: 这是一个简单的示例，显示document.body.scrollWidth不起作用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body onload="document.getElementById('sw').innerHTML = document.body.scrollWidth">
<p><code>document.body.scrollWidth</code> = <span id="sw"></span></p>
<div style="position:absolute;left:0;bottom:0;width:1980px;background-color:#ccc;padding:10px;">This DIV is 2000px wide including padding.</div>
</body>
</html>
The output of this should show that the width is 2000px, since that's the width of the widest part of the page. 此输出应显示宽度为2000px，因为这是页面最宽部分的宽度。 It doesn't. 它没有。
3 个解决方案
解决方案1
0
what about 关于什么
window.screen.width;
document.body.style.width = (window.screen.width - 15) + 'px';
window.screen.width - 15 is enough to avoid horizontal scroll-bar. window.screen.width - 15足以避免水平滚动条。 15 is vertical scrollbar width. 15是垂直滚动条宽度。
解决方案2
0 2013-03-19 12:48:59
for width: 宽度：
document.body.scrollWidth
for height: 高度：
document.body.scrollHeight
EDIT: for IE you'll have to specify position:relative for the body tag 编辑：对于IE，你必须为body标签指定position:relative
解决方案3
0 2013-04-26 13:28:37
Browsers don't treat html and body like ordinary elements. 浏览器不像普通元素那样对待html和body。 In particular many browsers are really buggy with respect to how they treat scrollWidth etc. on the body element. 特别是许多浏览器在如何处理body元素上的scrollWidth等方面确实存在问题。 The only real solution is to wrap all your content in one huge div for the entire page and use that. 唯一真正的解决方案是将所有内容包装在整个页面的一个巨大div中并使用它。 Because the div is an ordinary element it isn't affected by the bugs that cause the weird behaviour for body and html. 因为div是一个普通元素，所以它不会受到导致body和html奇怪行为的bug的影响。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.