简单的,跨浏览器的方式来获取JavaScript中的整个页面宽度,而不仅仅是视口宽度?

简单的,跨浏览器的方式来获取JavaScript中的整个页面宽度,而不仅仅是视口宽度?

问题描述:

我见过很多关于获取浏览器视口宽度的帖子,但是我想要发现的实质上是浏览器视口的宽度,如果它足够宽以避免水平滚动条。简单的,跨浏览器的方式来获取JavaScript中的整个页面宽度,而不仅仅是视口宽度?

我正在使用Prototype JS框架,并查看了使用该框架和使用纯JavaScript的各种选项。例如:

  • $(document.body).getWidth()document.body.clientWidth返回不包括页边距的视口宽度。
  • document.documentElement.clientWidthwindow.innerWidth返回包含边距的视口宽度。

我试图偷偷摸摸太:我绝对定位的对网页的与得到的左边缘位置的意图右手边(即CSS right:0)已知宽度的DIV,但它实际上与视口的右边缘对齐。

我唯一发现的作品是使用JavaScript向右滚动,直到它不再滚动(简单地使用scrollBy(1000000, 0)通常就足够了,但while循环显然更可靠),然后获取水平滚动偏移量并将其添加到视口宽度。但我不想滚动窗口:我想以某种方式检查它!

任何建议表示赞赏,即使jQuery的至少那么我可以看到如何jQuery做到这一点。


这里是表明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> 

这样做的输出应显示宽度为2000像素,因为这是在页面的最宽部分的宽度。它没有。

怎么样

window.screen.width; 

document.body.style.width = (window.screen.width - 15) + 'px'; 

window.screen.width - 15足以避免水平滚动条。 15是垂直滚动条宽度。

+0

我不认为这提供了他所要求的 – 2013-03-19 12:30:47

+0

在任何浏览器中,'window'没有名为'screen'的属性。 – Teemu 2013-03-19 12:39:20

+0

谢谢,但'screen.width'是屏幕的宽度:它与浏览器窗口的大小或其内容无关! – 2013-03-19 13:01:11

的宽度:

document.body.scrollWidth 

身高:

document.body.scrollHeight 

编辑:IE浏览器,你必须body标签指定position:relative

+0

谢谢,但我以前也试过这个。在我的测试中,它总是与'document.body.clientWidth'(我没有垂直滚动条)相同,它是包含边距的视口宽度,并且明显小于实际的完整页面宽度。 – 2013-03-19 13:09:50

+0

如果这不起作用,你正在做一些与你的标记相当奇怪的事情。你可以发布它,或者做一个jsfiddle什么的。 – hobberwickey 2013-03-19 13:45:24

+0

其实,我的标记不能简单得多!我将编辑原始帖子给出一个使用'scrollWidth'的例子,因为我似乎无法在这里做。 – 2013-03-19 14:23:29

浏览器不把html和身体像普通的元素。特别是许多浏览器对于如何处理body元素上的scrollWidth等方面真的很麻烦。 唯一真正的解决方案是将您的所有内容封装在整个页面的一个巨大的div中并使用它。因为div是一个普通的元素,所以它不会受到导致body和html奇怪行为的bug的影响。

+0

谢谢,但这似乎并不总能奏效。如果你在DIV中包装上面例子的内容(“简单的例子显示'document.body.scrollWidth'不起作用”),并得到该DIV的'offsetWidth',你会发现它与'document.body.scrollWidth',这意味着DIV只与浏览器视口一样宽(减去页边距)。我认为如果没有绝对定位的因素,这种方法就行得通。 – 2013-04-29 07:28:40