在JavaScript中,窗口,屏幕和文档有什么区别?

我将这些术语互换为DOM的全球环境。 有什么区别(如果有的话),我应该什么时候使用每一个?

Window是主要的JavaScript对象根,也就是浏览器中的全局对象,也可以看作是文档对象模型的根。 您可以在大多数情况下(在浏览器中)以window访问它。

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

window.document或只是document是可见(或更好的:呈现)文档对象模型/ DOM的主要对象。

那么,窗口是第一件被加载到浏览器。 这个窗口对象拥有大部分的属性,比如length,innerWidth,innerHeight,name,如果它已经closures,它的父母,等等。

那么文档对象呢? 文档对象是您的html,aspx,php或其他将被加载到浏览器中的文档。 该文件实际上被加载到窗口对象内,并具有可用的属性,如标题,URL,cookie等。这是什么意思? 这意味着如果你想要访问窗口的属性是window.property,如果它是文档,它是window.document.property,也可以简单的document.property。

DOM

这似乎很简单。 但是一旦IFRAME被引入,会发生什么?

IFRAME

  • 有关详情,请参阅: http : //eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf

window是实际的全局对象。

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

document是DOM的地方。

window包含了所有的东西,所以你可以调用window.screenwindow.document来获取这些元素。 看看这个小提琴,漂亮的打印每个对象的内容: http : //jsfiddle.net/JKirchartz/82rZu/

你也可以像这样在firebug / dev工具中看到对象的内容:

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

window是一切的根, screen只有屏幕尺寸,而document是顶级的DOM对象。 所以你可以把它看作是一个超级document window

简而言之,在下面更详细的描述中,

  • window是该上下文的JS的执行上下文和全局对象
  • document包含HTML
  • screen描述了物理显示器的全屏幕

有关这些对象的详细信息,请参阅W3C和Mozilla参考。 三者之间最基本的关系是每个浏览器选项卡都有自己的windowwindowwindow.documentwindow.screen属性。 浏览器选项卡的window是全局上下文,因此documentscreen参考window.documentwindow.screen 。 有关这三个对象的更多细节,请参阅Flanagan的JavaScript:权威指南 。

window

每个浏览器选项卡都有自己的顶级window对象。 每个<iframe> (和不build议使用的<frame> )元素都有自己的window对象,嵌套在父窗口中。 每个窗口都有自己独立的全局对象。 window.window总是指向window ,但是window.parentwindow.top可能引用封闭的窗口,允许访问其他执行上下文。 除了下面描述的documentscreenwindow属性还包括

  • setTimeout()setInterval()绑定事件处理程序到计时器
  • 给出当前URL的location
  • 使用方法back()forward()给出选项卡的可变历史logging
  • 描述浏览器软件的navigator

document

每个window对象都有一个要呈现的document对象。 这些对象会部分混淆,因为在分配唯一的id时,HTML元素会添加到全局对象中。 例如,在HTML代码片段中

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

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

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

screen

window对象也有一个screen对象,具有描述物理显示的属性:

  • 屏幕属性的widthheight是全屏幕

  • 屏幕属性availWidthavailHeight省略工具栏

显示呈现文档的屏幕部分是JavaScript中的视口 ,这可能令人困惑,因为我们在讨论与操作系统的交互时将屏幕的应用程序部分称为窗口。 任何document元素的getBoundingClientRect()方法将返回一个对象,该对象具有topleftbottomright属性,用于描述视口中元素的位置。

该窗口是第一件被加载到浏览器中的东西。 这个窗口对象拥有大部分的属性,比如length,innerWidth,innerHeight,name,如果它已经closures,它的父母,等等。

文档对象是您的html,aspx,php或其他将被加载到浏览器中的文档。 该文件实际上被加载到窗口对象内,并具有可用的属性,如标题,URL,cookie等。这是什么意思? 这意味着如果你想要访问窗口的属性是window.property,如果它是文档,它是window.document.property,也可以简单的document.property。

  • 有关详情,请访问: http : //eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CVkTMIL7.dpuf