【问题标题】：What is the difference between window, screen, and document in JavaScript?JavaScript 中的窗口、屏幕和文档有什么区别？
【发布时间】：2012-03-27 18:16:20
【问题描述】：

我看到这些术语可以互换用作 DOM 的全局环境。有什么区别（如果有的话），我应该什么时候使用每个？

【问题讨论】：

标签： javascript

【解决方案1】：

Window 是主要的 JavaScript 对象根，也就是浏览器中的 global object，它也可以被视为文档对象模型的根。您可以通过window 访问它。

window.screen 或只是screen 是一个关于物理屏幕尺寸的小信息对象。

window.document 或只是 document 是潜在可见（或者更好的是：渲染）文档对象模型/DOM 的主要对象。

由于window 是全局对象，您可以只使用属性名称来引用它的任何属性 - 所以您不必写下window. - 它将由运行时计算出来。

【讨论】：

@Mandy 一个 html 元素，如果它不是文档的一部分，那么它是不可见的。在将 iframe 附加到文档之前，您可以创建窗口完全不可见的 iframe
无论您访问哪个网页，窗口对象是否相同？并且该文档是一个包含有关该网页的信息的 javascript 对象？
@Mandy 的评论将 window 与 viewport 混淆了。 window 是浏览器选项卡或 <iframe>（或已弃用的 <frame>）的 JavaScript 对象。 viewport 是在选项卡或框架中看到的呈现document 的矩形。
window.document 或文档始终相同？
因为 window 是全局对象 - 它的每个属性/方法都可以在不实际写下 [window.] 的情况下访问，所以 window.document 可以写成文档，当然它指向完全相同的东西 - 因为属性本身是相同的，只是引用了多种方式。

【解决方案2】：

嗯，窗口是第一个加载到浏览器中的东西。此窗口对象具有大部分属性，如长度、内部宽度、内部高度、名称、如果它已关闭、其父级等。

那么文档对象呢？文档对象是将加载到浏览器中的 html、aspx、php 或其他文档。文档实际上是在窗口对象中加载的，并且具有可用的属性，如标题、URL、cookie 等。这到底意味着什么？这意味着如果你想访问窗口的属性，它是 window.property，如果它是文档，它是 window.document.property，它也可以简称为 document.property。

这看起来很简单。但是一旦引入 IFRAME 会发生什么？

查看更多信息：http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf

【讨论】：

误导试图学习基础知识的人：“文档对象是将加载到浏览器中的 html、aspx、php 或其他文档。”浏览器呈现 HTML 和 CSS 并执行 JavaScript。浏览器看不到 PHP 等服务器端语言的文件。
@BennettBrown 确实如此，但是在 Chrome（或其他调试）控制台中探索 window 和 window.document 的初学者可以阐明它们的嵌套性质。 document 如何公开 HTML 和 document.（文档点）如何显示文档的所有属性。而父 window 包含 javascript 全局变量！这篇文章可以让初学者开始学习。初学者也应该看看this SO how to

【解决方案3】：

简而言之，下面有更多详细信息，

window 是该上下文的 JavaScript 的执行上下文和全局对象
document 包含 DOM，通过解析 HTML 初始化
screen 描述物理显示器的全屏

有关这些对象的详细信息，请参阅 W3C 和 Mozilla 参考。三者最基本的关系是每个浏览器标签都有自己的window，而一个window有window.document和window.screen属性。浏览器选项卡的window 是全局上下文，所以document 和screen 指的是window.document 和window.screen。关于这三个对象的更多详细信息如下，Flanagan's JavaScript: Definitive Guide。

`window`

每个浏览器选项卡都有自己的顶级window 对象。每个<iframe>（和不推荐使用的<frame>）元素也有自己的window对象，嵌套在父窗口中。这些窗口中的每一个都有自己独立的全局对象。 window.window 总是指代window，但window.parent 和window.top 可能指代封闭窗口，从而可以访问其他执行上下文。除了下面描述的document 和screen，window 属性还包括

setTimeout() 和 setInterval() 将事件处理程序绑定到计时器
location 给出当前网址
history 使用方法 back() 和 forward() 提供选项卡的可变历史记录
navigator描述浏览器软件

`document`

每个window 对象都有一个要渲染的document 对象。这些对象之所以混淆，部分原因是 HTML 元素在分配了唯一 id 时被添加到全局对象中。例如，在 HTML sn-p

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

段落元素可以被以下任何一个引用：

window.holyCow 或 window["holyCow"]
document.getElementById("holyCow")
document.querySelector("#holyCow")
document.body.firstChild
document.body.children[0]

`screen`

window 对象还有一个 screen 对象，其属性描述物理显示：

屏幕属性width 和height 是全屏
屏幕属性availWidth 和availHeight 省略工具栏

显示渲染文档的屏幕部分是 JavaScript 中的 viewport，这可能会造成混淆，因为在谈论与操作系统的交互时，我们将应用程序的屏幕部分称为窗口。任何document 元素的getBoundingClientRect() 方法将返回一个对象，该对象具有top、left、bottom 和right 属性，用于描述该元素在视口中的位置。

【讨论】：

有一个等效的指令 window.onload 使用文档对象？。
@FilipeCanatto 查看stackoverflow.com/questions/588040/…
这是plagiarised at Medium (Simran Singh)。从“窗口...每个浏览器标签都有自己的”。 Simran Singh 在 Medium 的帖子被 100% 抄袭。第一部分来自eligeske.com 页面（也抄袭了这个 Stack Overflow 问题的两个答案（Arlan T's 和Manjunath Raddi's 答案）。
Peter，同意 Singh 的抄袭非常严重。我不太介意，实际上更介意的是，他从我的帖子中删除的一件事是我说我的帖子关注弗拉纳根的部分。我猜如果他要抄袭，他觉得有必要删除引用LOL。

【解决方案4】：

window 是实际的全局对象。

screen 是屏幕，它包含有关用户显示的属性。

document 是 DOM 所在的位置。

【讨论】：

document也可以是window.document，screen可以是window.screen，window可以是window.window（或window.window.window）：-P
@PeterAronZentai：那是因为window 是一个全局变量，这使它成为全局window 对象的一个属性。 :-)
我需要通过 ajax 打开一个新页面，我想用新页面替换整个当前页面。我应该使用 $(document).load(page);或 $(window).load(page); ?

【解决方案5】：

window 包含所有内容，因此您可以调用window.screen 和window.document 来获取这些元素。看看这个小提琴，漂亮地打印每个对象的内容：http://jsfiddle.net/JKirchartz/82rZu/

你也可以像这样在Firebug/开发工具中看到对象的内容：

console.dir(window);
console.dir(document);
console.dir(screen);

window 是一切的根，screen 只有屏幕尺寸，document 是顶级 DOM 对象。所以你可以把它想象成window就像一个超级document...

【讨论】：