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

Question

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

Tim*_*mit 214 javascript

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

Answer 1

Pet*_*tai 208

Window是主要的JavaScript对象根,也就是浏览器中的全局对象,也可以视为文档对象模型的根.您可以像global object在大多数情况下一样访问它(在浏览器中);

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

window.screen或者只是screen可见(或更好的:渲染)文档对象模型/ DOM的主要对象.

文档可以大于窗口 - 窗口是浏览器中的"可见"部分. (43认同)
来自@Mandy的评论将`window`与*viewport*混淆.`window`是浏览器选项卡的JavaScript对象或`<iframe>`(或不推荐的`<frame>`).*viewport*是在制表符或框架中看到的渲染"文档"的矩形. (21认同)
window.document或文件一直都一样吗？ (2认同)
由于window是全局对象-可以访问它的每个属性/方法而无需实际写下[window。]，因此window.document可以写为只是文档，当然，它指向的是同一件事-属性本身是相同的，只是引用了多种方式。 (2认同)

Answer 2

ata*_*min 92

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

那么文档对象呢？文档对象是您的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这样的服务器端语言的文件. (12认同)

Answer 3

Nie*_*sol 45

这window是实际的全局对象.

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

这document是DOM的所在.

我检查过,window.window.window.window也可以; P (29认同)
`document`也可以是`window.document`,`screen`可以是`window.screen`,`window`可以是`window.window`(或`window.window.window`):-P (10认同)
@PeterAronZentai:那是因为`window`是一个全局变量,它使它成为全局`window`对象的属性.:-) (5认同)

Answer 4

Ben*_*own 42

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

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

有关这些对象的详细信息,请参阅W3C和Mozilla参考.三者之间最基本的关系是每个浏览器标签都有自己的window,并且window具有window.document和window.screen性能.浏览器选项卡的window是全球范围内,所以document并screen请参阅window.document和window.screen.关于这三个对象的更多细节如下,遵循Flanagan的JavaScript:权威指南.

`window`

每个浏览器选项卡都有自己的顶级window对象.每个<iframe>(和不推荐的<frame>)元素也有自己的window对象,嵌套在父窗口中.这些窗口中的每一个都有自己独立的全局对象.window.window通常是指window,但window.parent并window.top可能是指封闭的窗户,给访问其他执行上下文中.除了document和screen下面所描述的,window属性包括

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

`document`

每个window对象都有一个document要渲染的对象.这些对象之间的混淆部分是因为HTML元素在分配了唯一ID时会添加到全局对象中.例如,在HTML片段中

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

Run Code Online (Sandbox Code Playgroud)

段落元素可以通过以下任何一种引用:

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描述在视口中的元件的位置的特性.

Answer 5

JKi*_*rtz 11

在window包含一切,所以你可以打电话window.screen和window.document得到这些元素.看看这个小提琴,漂亮打印每个对象的内容:http://jsfiddle.net/JKirchartz/82rZu/

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 6

Eve*_*Eve 5

在控制台中，通过编写

\n

this

\n

或者

\n

window

\n

然后按 Enter 键，我们可以访问window浏览器中的顶级对象 - 或者甚至也可以使用window的这些属性之一：

\n

top

\n

parent

\n

self

\n

globalThis

\n

甚至介于两者之间。

\n

事实上，检查上面的任何一对都会返回true：

\n

this === window// 真的

\n

window === globalThis// 真的

\n

this === self// 真的

\n

parent === window// 真的

\n

top === parent// 真的

\n

甚至是它们的多种组合——事实是可能的，因为

\n

window.window === window// 真的

\n

因为window也是它自己的财产，所以我们甚至可以写window.window.window === window，甚至类似的东西window.window.self.top.parent.globalThis === window，所有那些返回的true。

\n

唯一的例外是我们不能this在最后一个位置上使用，因为它不是一个属性（因此window.window.this === window// false 因为实际上window.this === undefined// true，因为window没有这样的this属性）。

\n

因此，我们不能写~~self.this~~, ~~top.this~~, ~~parent.this~~, ~~window.this~~，唯一可能的方法是globalThis在最后一个位置将其替换为，作为的属性window，如top.globalThis等。

\n

当有一个带有框架的网页时，每个框架文档都属于一个自己的单独的窗口对象，该单独的窗口是前面显示的上一个顶级窗口的子窗口- 您可以简单地在带有框架的平台上测试它（例如jsfiddle，codepen，w3schools），其中在框架中写入和执行console.log(window.parent === window);将返回，而如果直接在控制台中false写入将返回。在框架中，将访问全局窗口（框架窗口对象的父级显然与框架窗口对象本身不同）。您可以检查在代码框架中单独运行的每个窗口的内容（并看到如下结果）：window.parent === windowtruewindow.parent

\n
console.log(window.document.all);// HTMLAllCollection(6) [html, head, body, p#demo, 按钮, script, demo: p#demo]
\n
分别
\n
console.log(window.parent.document.all);// HTMLAllCollection(335)\xc2\xa0[html, head, script, script, title, 元, 元, 元, 元, 元, 元, 元, 元, 链接, 链接, 链接, 链接, 脚本, 脚本, 脚本、脚本、脚本、脚本、脚本、脚本、脚本、样式、脚本、脚本、脚本、脚本、样式、脚本、元、元、元、元、元、元、元、元、脚本、argprec0、argprec1、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接, script, link, script, link, script,\xc2\xa0\xe2\x80\xa6] -因此父文档中包含更多元素
\n
进行相同的检查，但这次是从控制台进行：
\n
window.document.all// HTMLAllCollection(335) [html, head, script, script, title, 元, 元, 元, 元, 元, 元, 元, 元, 链接, 链接, 链接, 链接, 脚本, 脚本, 脚本, 脚本, 脚本、脚本、脚本、脚本、脚本、样式、脚本、脚本、脚本、脚本、样式、脚本、元、元、元、元、元、元、元、元、脚本、argprec0、argprec1、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接、脚本、链接, script, link, script, \xe2\x80\xa6] -再次相同的巨大元素列表
\n
正如我们所看到的，控制台（使用 F12 打开它）可以访问最顶层的窗口范围/上下文（相对于包含在其自己的有限上下文/范围中的下面的框架），因此它会立即显示所有元素。这也与我们一开始提到的上下文相同。
\n
\n
进一步了解主要概念，还有更多需要理解的内容。\n在说这window是浏览器中的顶级对象时，我们应该理解它是浏览器内存中的某种表示（称为客户端的软件），浏览器将在其中进行操作绘制（渲染）可见页面（我们将其称为文档- 再次，可作为的属性访问window）。
\n
因此，我们可以访问document控制台 - 查看其结构 - 只需使用window.document我们可以通过单击查看其中所有内容的位置即可#document。同样，我们将看到文档的表示，而不是文档本身。在控制台中看到的表示形式是DOM，它是原始文件的模型，是通过在需要时以某种方式对浏览器的 JavaScript 引擎从原始文档的源代码解析的数据进行 PLUS改进而创建的。源代码是不可变的（浏览器不会更改从互联网接收的 html 文件），而 DOM 是可变的（并且突变是由在设备硬件上渲染页面之前或之后运行到浏览器中的 JavaScript 代码进行的）。为了清楚起见：我们在控制台中看到的是 DOM，我们在浏览器中看到的是渲染，我们在源代码中看到的是原始文件。他们不一样，每个人都不同于另外两个。
\n
为了帮助您理解，我会将这个过程与“现实生活”中的客户端软件进行比较，即某个有才华的人参观卢浮宫博物馆并观看蒙娜丽莎的画作（源代码文件）。游客心中的蒙娜丽莎形象与达芬奇的原画并不相同，它只是其心理表征。由此，这位才华横溢的游客将在他的大脑中再次重现一些“自己的”蒙娜丽莎，在这里和那里改进应该改进或改变的地方，最后回到家时在画布上画出原始图像的所有颜色甚至更多。
\n
因此，我们有 3 个“实体”（a- html 文件，不可变，包含源代码，b-它的一种表示形式，在源代码被浏览器解析并“理解”或改进后创建，c-渲染本身屏幕上显示的内容）。提到的主要改进可以是在源文件中以前缺少的位置添加结束标记，根据源文件中包含的脚本指令添加或删除模型内的元素，更改它们，请求更多资源（如图像、字体、CSS）文件、用作最终整页资源的媒体文件等）等等。
\n
尽管名称相似，但与特定文档相关的窗口和浏览器窗口不应被视为同一事物，第一个窗口附加到后一个窗口（并且作为其属性可访问）。同样，当有多个浏览器窗口（例如 10 个实例）时，每个浏览器窗口都有多个选项卡（或没有），这些窗口会附加到浏览器窗口，并且它们的对象最多可window[0]通过window[9].
\n
对于屏幕而言，浏览器客户端是一个软件（代码），它运行并执行另一个软件（源代码），目的是最终通过多层将该（第二）代码显示在硬件设备（显示器/屏幕）上。为此，浏览器软件实际上也有自己独立的编程例程，能够与操作系统交互，以检测屏幕分辨率、尺寸、颜色深度、一些设置等，因此它充当操作系统和浏览器之间的桥梁。要在其渲染区域上显示的文件。
\n
使用console.log(window.screen)将返回给我们浏览器从操作系统收集的有关设备监视器的详细信息（并存储在其内存中），例如{availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24,\xc2\xa0\xe2\x80\xa6}
\n
可以使用更简单的代码（不需要总是写这个window词）并提取例如设备的宽度：
\n
console.log(screen.width) // 1920
\n
您甚至可以使用此类数据来执行一些纯粹基于 JavaScript 而没有任何 CSS 的伪媒体查询 - 例如
\n
function goMobile() {\n if (screen.width < 900) {location.replace("/index-mobile.html");}\n}\ngoMobile();\n
Run Code Online (Sandbox Code Playgroud)\n
结论是：window和document属于DOM，screen不一样。您需要所有这些，但是因为document和screen都是window对象的属性，您可以直接在代码中调用它们（缩短代码）。更多的是，screen关于硬件部分，而不是任何浏览器可渲染的矩形可用区域，它没有document.body. 最多，您可以使用screen数据来优化您的加载页面，例如限制资产下载以获得更好的移动设备体验等。
\n

归档时间：	13 年，7 月前
查看次数：	87953 次
最近记录：	6 年，7 月前