Javascript中的窗口，屏幕和文档有什么区别？

时间：2012-03-27 18:16:20

标签： javascript

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

6 个答案:

答案 0 :(得分：187)

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

访问它

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

window.document或仅document是可见（或更好的：已呈现）文档对象模型/ DOM的主要对象。

由于window是全局对象，因此您只需使用属性名称即可引用它的任何属性 - 因此您不必记下window. - 它将由运行时。

答案 1 :(得分：84)

好吧，窗口是第一个加载到浏览器中的东西。此窗口对象具有大多数属性，如length，innerWidth，innerHeight，name（如果已关闭），其父项等。

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

dom

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

iframe

答案 2 :(得分：44)

window是实际的全局对象。

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

document是DOM所在的位置。

答案 3 :(得分：32)

简而言之，下面有更多细节，

  • window是该上下文的JavaScript
    • 的执行上下文和全局对象
  • document包含通过解析HTML
    • 初始化的DOM
  • 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片段

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

可以通过以下任何一种方式引用段落元素：

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

screen

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

  • 屏幕属性width和height是全屏

  • 屏幕属性availWidth和availHeight省略工具栏

显示渲染文档的屏幕部分是JavaScript中的视口，这可能会让人感到困惑，因为在讨论与操作系统的交互时，我们将应用程序的屏幕部分称为窗口。任何getBoundingClientRect()元素的document方法都会返回一个对象，其top，left，bottom和right属性描述了视口中的元素。

答案 4 :(得分：10)

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

您还可以在firebug / dev工具中查看对象的内容，如下所示：

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

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

答案 5 :(得分：1)

窗口是第一个加载到浏览器中的东西。此窗口对象具有大多数属性，如length，innerWidth，innerHeight，name（如果已关闭），其父项等等。

文档对象是您的html，aspx，php或其他将加载到浏览器中的文档。该文档实际上被加载到窗口对象中，并具有可用的属性，如标题，URL，cookie等。这究竟意味着什么？这意味着如果你想访问窗口的属性，那就是window.property，如果它是文档，那么window.document.property也可以作为document.property提供。

相关问题
最新问题