javascript 窗口、屏幕和文档有什么区别？

o8x7eapl 于 11个月前发布在 Java

关注(0)|答案(8)|浏览(151)

我认为这些术语可以互换使用，作为DOM的全局环境。它们之间有什么区别（如果有的话）？什么时候应该使用它们？

JavaScript

来源：https://stackoverflow.com/questions/9895202/what-is-the-difference-between-window-screen-and-document

8条答案

按热度按时间

4si2a6ki1#

window是主JavaScript对象根，在浏览器中也称为global object，它也可以被视为文档对象模型的根。您可以作为window访问它。
window.screen或screen是关于物理屏幕尺寸的小信息对象。
window.document或者仅仅是document是潜在可见（或者更好的是：渲染）文档对象模型/DOM的主要对象。

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

赞(0）回复(0）举报 11个月前

hzbexzde2#

窗口是第一个被加载到浏览器中的东西。这个窗口对象拥有大多数属性，如长度，innerWidth，innerHeight，name，如果它已经关闭，它的父对象等等。
那么document对象是什么呢？document对象是你的html，aspx，php，或其他将被加载到浏览器中的文档。文档实际上被加载到窗口对象中，并具有可用的属性，如标题，URL，cookie等。这到底是什么意思？这意味着如果你想访问窗口的属性，它是www.example.com，如果它是document，它是window.document.property，也可以简称为document.property。window.property

的数据
这看起来很简单，但是一旦引入IFRAME会发生什么呢？

的

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

赞(0）回复(0）举报 11个月前

tf7tbtn23#

简要地说，在下面更详细地描述的情况下，

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。

第一分钟12秒1x

每个浏览器选项卡都有其自己的顶级window对象。每个<iframe>元素也有自己的window对象，嵌套在父窗口中。每个窗口都有自己的全局对象。window.window总是引用window，但是window.parent和window.top可能引用封闭窗口，从而提供对其他执行上下文的访问。

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

`document`的第一个字符

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

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

字符串
paragraph元素可以被以下任何一个引用：

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属性，描述视口中元素的位置。

赞(0）回复(0）举报 11个月前

tzdcorbm4#

window是实际的全局对象。
screen是屏幕，它包含有关用户显示的属性。
document是DOM所在的位置。

赞(0）回复(0）举报 11个月前

iqjalb3h5#

window包含所有内容，因此您可以调用window.screen和window.document来获取这些元素。
您也可以在Firebug/development tools中看到对象的内容，如下所示：

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

字符串
window是所有东西的根，screen只是屏幕尺寸，而document是顶级DOM对象。所以你可以把它看作是一个超级document.

赞(0）回复(0）举报 11个月前

enxuqcxy6#

在控制台中，通过编写

this

或

window

然后按Enter键，我们可以访问浏览器中的顶级对象**window**-甚至可以使用 window 的任何一个属性：

top
parent
self
globalThis

甚至两者之间的结合。
实际上，检查上面的任何一对都会返回true：
this === window // true
window === globalThis // true
this === self // true
parent === window // true
top === parent // true
甚至是它们的多种组合--事实可能是因为

window.window === window// true

因为window也是 * 它自己的属性 ，所以我们甚至可以写*window.window.window === window，甚至像window.window.self.top.parent.globalThis === window这样的东西，所有这些都返回true。
唯一的例外是，我们不能在最后一个位置使用this，因为 * 它不是一个属性 （因此window.window.this === window// false，因为实际上*window.this === undefined// true，因为window没有这样的 this 属性）。
因此，我们不能写self.this，top.this，parent.this，window.this，唯一可能的方法是在最后一个位置用**globalThis代替它，作为window的属性，就像在top.globalThis等中一样。
当有一个带有框架的网页时，每个框架文档都属于一个单独的 window 对象，该单独的 window 是前面显示的顶层window的子对象-您可以在带有框架的平台上简单地测试它。（如 jsfiddle，codepen，w3schools）其中，在帧console.log(window.parent === window);中写入和执行将返回false，而如果直接在控制台中写入window.parent === window，则将返回true。frame，window.parent将访问全局window**（frame window 对象的父对象显然与frame window 对象本身不一样）。您可以检查每个这些windowS单独运行在frame中的代码的内容（并看到如下结果）：

console.log(window.document.all);// HTMLAllCollection（6）[html，head，body，p#demo，button，script，demo：p#demo]

分别

console.log(window.parent.document.all);// HTMLAllCollection（335）[html，head，script，script，title，meta，meta，meta，meta，meta，meta，meta，meta，link，link，link，link，script，script，script，script，script，script，script，script，style，script，script，script，script，script，style，script，meta，meta，meta，meta，meta，meta，meta，meta，meta，script，argprec0，argprec1，link，script，link，script，link，link，script，link，link，script，link，link，script，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，script，link，script，link，script，link，script，link，script，link，script，link，script，.] - * 因此父文档中包含的元素要多得多 *

执行相同的检查，但这次是从控制台：

window.document.all// HTMLAllCollection（335）[html，head，script，script，title，meta，meta，meta，meta，meta，meta，meta，meta，link，link，link，link，script，script，script，script，script，script，script，script，style，script，script，script，script，script，style，script，meta，meta，meta，meta，meta，meta，meta，meta，meta，script，argprec0，argprec1，link，script，link，script，link，link，script，link，link，script，link，link，script，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，link，script，link，script，link，script，link，script，link，script，link，script，link，script，.] - * 再次使用相同的巨大元素列表 *

正如我们所看到的，console（用F12打开它）可以访问最顶层的窗口范围/上下文（而下面的框架包含在它自己有限的上下文/范围中），因此它可以一次显示所有元素。这也是我们开始引用的上下文。
如果说 * window是浏览器中的顶级对象 *，那么应该理解它是浏览器内存中的某种表示形式。（软件称为 * 客户端 *）从浏览器将 * 油漆 *（渲染）可见的页面（我们称之为 * 文档 * -同样，可作为window的属性访问）。

因此，我们可以在控制台中访问document-查看其结构-只需使用window.document，我们可以通过单击#document来查看其中的所有内容。同样，我们将看到文档的表示，* 而不是文档本身 *。在控制台中看到的表示是DOM，是原始文件的模型，并且是通过在需要的地方以某种方式对浏览器的JavaScript引擎从原始文档的 * 源代码 * 解析的数据进行PLUS * 改进 * 而创建的。源代码是不可变的（浏览器不改变从互联网接收的html文件），而DOM是可变的（并且在页面被呈现在设备硬件上之前或之后，由运行到浏览器中的JavaScript代码进行变化）。我们在console中看到的是DOM，在browser中看到的是rendering，在source code中看到的是原始文件，它们是不一样的，每个人都和其他两个人不一样。
为了帮助您理解，我将把这个过程与客户端软件在“真实的生活”中的某个有才华的人参观卢浮宫博物馆并看到蒙娜丽莎的画作进行比较（源代码文件）。游客心目中的蒙娜丽莎的形象 * 与列奥纳多的原画并不相同 *，它只是它的一种精神表现。从它来看，然后，这位有才华的游客将在他的大脑中重新创造一些“自己的”蒙娜丽莎，在这里和那里改进应该改进或改变的地方，最后回到家里在画布上画出原始图像的所有颜色，甚至更多。
因此，我们有三个“实体”（a- html文件，不可变，包含源代码，b- 它的一种表示，在源代码被浏览器解析和“理解”或改进后创建，c- 显示在屏幕上的渲染本身）。提到的主要改进可以像在源文件中以前缺少的地方添加关闭标签，根据源文件中包含的脚本指令添加或删除模型中的元素，更改它们，请求进一步的资源（如图像，字体，css文件，用作最终完整页面资产的媒体文件等）等。
尽管名称相似，但与特定文档相关的 * 窗口 * 和 * 浏览器窗口 * 不应被视为同一事物，前一个窗口与后一个窗口相连（并且作为其属性可访问）。同样，当有多个浏览器窗口时，（比如说10个示例），每个示例都有多个选项卡（或没有），这些选项卡附加到浏览器窗口，它们的对象可以由window[0]到window[9]访问。
关于屏幕，浏览器客户端是运行和执行另一个软件的软件（代码）为了最终在硬件设备上显示该（第二）代码，为了这个目的，浏览器软件实际上也具有其自己的单独的编程例程，能够与操作系统交互，以便检测屏幕分辨率、大小、颜色深度，一些设置和更多，因此它充当操作系统和要在其渲染区域上显示的文件之间的桥梁。
使用console.log(window.screen)将向我们返回浏览器从操作系统收集的有关设备监视器（并存储在其内存中）的详细信息，例如{availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, …}
可以使用更简单的代码（不需要总是写window字）并提取例如设备的宽度：
console.log(screen.width) // 1920
您甚至可以使用这些数据来执行一些纯粹基于JavaScript而不使用任何CSS的伪媒体查询-例如

function goMobile() {
    if (screen.width < 900) {location.replace("/index-mobile.html");}
}
goMobile();

字符串
结论是：window和document属于DOM，screen不属于。您需要所有这些，但是因为document和screen都是window对象的属性，所以您可以直接在代码中调用它们（代码缩短）。更多的是，screen是关于硬件部分，而不是任何浏览器的矩形可用区域，它没有document.body的含义。最多，您可以将screen数据用于优化您的加载页面，例如限制资产下载以获得更好的移动终端体验等。

赞(0）回复(0）举报 11个月前

6xfqseft7#

window是根对象，所有内容都挂载在它上面。document等于window.document。
当注册一些全局事件时，如键盘快捷键或上下文菜单，建议使用window.addEventListener而不是document。document上的事件将冒泡到window：

window.addEventListener('keyup',() => console.log('window'));
document.addEventListener('keyup',() => console.log('document'));
// Output: 'document', 'window'
document.addEventListener('keyup',(ev) => {
  console.log('document');
  ev.stopPropagation();
});
// Output: 'document'

字符串

赞(0）回复(0）举报 11个月前

3pmvbmvn8#

window对象就像是所有这些的根，document和screen是它们的属性。screen只是用户显示区域，document是包含所有html元素及其类和属性的DOM。因此，window是父对象，而它们是子对象。https://developer.mozilla.org/en-US/docs/Web/API/Window https://developer.mozilla.org/en-US/docs/Web/API/Window/screen

赞(0）回复(0）举报 11个月前

我来回答

javascript 窗口、屏幕和文档有什么区别？

8条答案

第一分钟12秒1x

`document`的第一个字符

`screen`的一个字符串

相关问题

热门标签

最新问答

javascript 窗口、屏幕和文档有什么区别？

8条答案

第一分钟12秒1x

document的第一个字符

screen的一个字符串

相关问题

热门标签

最新问答

`document`的第一个字符

`screen`的一个字符串