$(window).width()与$(document).width()之间的区别是什么？

Question

在 jQuery 中，$(window).width() 与 $(document).width() 有哪些主要区别？ window 是否代表浏览器，document 代表 HTML 页面的 body 部分？我的理解正确吗？

- kbvishnu

---

@PizzaiolaGorgonzola，您能否解释一下这句话“但它不应被用来构建您的代码，因为它会鼓励编写不透明、难以阅读、难以维护和不面向对象的代码。” - kbvishnu

Answer 1

根据width()的文档:

此方法还能够查找窗口和文档的宽度。

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

简单的jsFiddle演示

在这个演示中，我设置了html { width: 1000px; }，它比视口大。

你的HTML页面主体的宽度是三分之一的值。$('body').width()也可能与另外两个值不同（例如尝试使用body { margin: 100px; }）。

- kapa

Answer 2

您说得对。 window 是浏览器可见区域，而document是页面的实际主体。因此，您的document可能会延伸到远远超出window的范围。

- Henesnarfel

---

那么为什么jQuery演示显示的窗口宽度比浏览器宽度小呢？http://screencast.com/t/PlTXAShwmeP7 - AlxVallejo

@AlxVallejo 如果你查看源代码，你会发现演示代码正在运行的 iFrame 宽度为 568 像素。 - Henesnarfel

“document”可以扩展到远远超出“window”的范围，这让我很清楚。 - inquisitive

Answer 3

好的，window是最先加载到浏览器中的对象。该window对象具有大多数属性，如length、innerWidth、innerHeight、name、是否已关闭、其父级等等。

那么文档对象呢？

document对象是您将要加载到浏览器中的html文档。实际上，document会在window对象内部加载，并且有一些可用的属性，如title、URL、cookie等。这意味着什么？这意味着如果您想访问window的属性，它是window.property，如果是document，则是window.document.property，也可以缩写为document.property。

因此总结一下，文档可能比窗口小。

来自: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/

- Rick Hoving

---

好的，您的aspx或php仍将输出HTML文档。使用哪种语言创建HTML并没有区别。 - kapa

没错，这些语言都是服务器端的。编辑过了，谢谢。 - Rick Hoving

@Rick，你应该引用引号，这既有用又符合伦理道德：http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/ - Tom W Hall

@TomHall，你说得没错，我已经添加了数据来源的链接。 - Rick Hoving

Answer 4

另一个重要的区别是：

$(window).width(); 可在文档加载/准备之前使用。

$(document).width(); 只能在文档加载后才能使用。

因此，第二个需要等待文档加载完成之后才能使用。

$(document).ready(function() {
   var w = $(document).width();
});

- Doctor Watts

Answer 5

$(window).width(); 返回浏览器视口的宽度。

$(document).width(); 返回HTML文档的宽度。

$(document).width() 不太可靠，全屏浏览器下结果会偏小。使用 $(window).width() 更加安全。

$(window).width() 获取整个窗口的宽度，包括滚动条等内容。

- Mouna Cheikhna

Answer 6

是的 - 窗口的宽度是浏览器窗口的宽度，文档的宽度是网页的宽度。

- Mateusz W