前言

每个JavaScript环境都有一个全局对象（global object）。在全局范畴内创立的任何变量实际上都是这个对象的属性，而任何函数都是它的办法。在浏览器环境中，全局对象是window对象，它代表了蕴含网页的浏览器窗口。

在这篇文章中，咱们将介绍Window对象的一些重要用处：

  • 浏览器对象模型（Browser Object Model）
  • 获取浏览器信息
  • 获取并应用浏览器history对象
  • 创立并管制浏览器窗口
  • 获取屏幕尺寸以及显示细节

浏览器对象模型

浏览器对象模型（简称BOM）是一个属性和办法的汇合，蕴含了对于浏览器和计算机屏幕的信息。比如说，咱们能够找出哪个浏览器正在被用来浏览一个页面，只管这种方法不牢靠。咱们还能够找出它被浏览的屏幕尺寸，以及在以后页面之前曾经拜访过哪些页面。它还能够用于创立弹出式窗口这种相当可疑的做法，如果你喜爱惹恼你的用户的话。

BOM没有官网的规范，只管所有支流浏览器都反对许多属性和办法，但这曾经成为了一种事实上的规范。这些属性和办法是通过window对象提供的，每一个浏览器窗口，tab页，弹窗，frame以及iframe都具备window对象。

浏览器环境

请记住，JavaScript能够在不同的环境上运行。BOM只在浏览器环境中有意义。这意味着其余环境可能没有window对象，只管他们仍有全局对象。比如说，Node.js领有一个称为global的对象。

如果你不晓得全局对象的名称，你能够在全局作用域中应用关键字this来援用全局对象。上面的代码提供了一种将变量global赋值给全局对象的快捷方式：

const global = this;

深刻全局变量

全局变量是不应用const、let或var关键字创立的变量。全局变量能够在整个程序中进行拜访。

全局变量是全局对象的属性。在浏览器环境中，全局对象就是window对象。这意味着任何创立的全局变量都是window对象的属性，能够从如下示例中看出：

x = 6;  // 创立的全局变量>> 6window.x // 同一个变量能够作为window对象的一个属性被拜访>> 6// window.x === x>> true

通常状况下，你应该在不应用window对象的状况下援用全局变量。这样能够缩小字符输出，并且你的代码在不同的环境中也更容易移植。如果你须要查看一个全局变量是否曾经被定义，则是一个例外。比如说，如果x没有被定义，上面的代码将会抛出ReferenceError谬误：

if (x) {    // do something}

然而，如果变量作为window对象的属性进行拜访，那么代码依然能够失常运行，window.x会间接返回false，意味着代码块将不会被执行：

if (window.x) {    // do something}

有些函数比如说parseInt()和isNaN() ，就是全局对象的办法。在浏览器环境中，它们就是window对象的办法。与变量一样，习惯上省略通过window对象而间接拜访它们。

对话框

在浏览器中，有三个函数用来生成对话框：alert()，confirm()以及prompt()。这些都不是ECMAScript规范的一部分，只管所有支流浏览器都反对它们作为window对象的办法。

Alert Dialog

window.alert()会暂停程序的执行，并在对话框中显示音讯。音讯被作为参数提供给办法，办法总是返回undefined：

window.alert('Hello');>> undefined

Confirm dialog

window.confirm()办法会进行程序的执行，并显示一个确认对话框。展现作为参数提供的信息，并给出确定或勾销的选项。如果用户点击确定，则返回布尔值true，如果用户点击勾销，则返回布尔值false：

window.confirm('Do you wish to continue?');>> undefined

Prompt dialog

window.prompt() 办法会进行程序的执行，并显示一个对话框。展现作为参数提供的信息，以及一个容许用户输出文本的输出字段。当用户点击确定时，该文本会作为字符串进行返回。如果用户点击勾销时，将会返回null：

window.prompt('Please enter your name:');

审慎应用原生对话框

值得再次强调的是，这些办法会在程序执行过程中让程序进行执行。这意味着在办法被调用的时刻，所有都将进行解决，直到用户点击确认或者勾销。如果程序须要同时解决其余货色，或者程序在期待回调函数，那么这种形式就会造成问题。

在一些场合，这种性能因具备一些劣势从而能够应用。比如说，window.confirm()对话框能够被用来当做最终确认，检查用户是否想要删除资源。这将阻止程序持续进行并阻止删除资源，直到用户来决定如何解决。

还值得注意的是，大多数浏览器容许用户禁用任意反复呈现的对话框，这意味着该性能是不牢靠的。

浏览器信息

window对象有一系列的属性和办法，这些属性和办法提供了无关用户浏览器的信息。

Navigator对象

window对象有一个属性叫做navigator，该属性返回Navigator对象的援用。Navigator对象蕴含无关正在应用的浏览器的信息。下面的userAgent属性将会返回无关正在应用的浏览器和操作系统的信息。比如说，如果运行上面的代码，它将显示我正在应用Mac OS上的Safari 10版本：

window.navigator.userAgent>>"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8"

不过，不要依赖这些信息，因为用户能够批改这些信息，从而伪装成其余浏览器。对返回的字符串也很难有任何意义，因为在某种程度上，所有的浏览器都会伪装成其余浏览器。

比如说，每个浏览器都会在其本身的userAgent属性上蕴含Mozilla字符串，因为遗留的Netscape兼容性的起因。userAgent曾经从官网规范中废除，然而它依然在所有支流浏览器中失去很好的反对。

URL

window.location是一个对象，该对象蕴含无关以后页面URL的信息。它蕴含一些属性，提供对于URL的不同片段的信息。

href属性将残缺的URL作为字符串进行返回：

window.location.href>> "<https://www.sitepoint.com/javascript-window-object/>"

该属性（以及本节其余大多数属性）是可读/可写属性，这意味着能够通过赋值被更改。如果实现赋值操作，以后页面将会应用新的属性值进行从新加载。比如说，输出上面的代码到浏览器的控制台中，浏览器将会重定向到指定页面：

window.location.href = '<https://www.sitepoint.com/>'>> "<https://www.sitepoint.com/>"

protocol属性返回一个形容所应用的协定（比方http, https, pop2, ftp等等）的字符串。留神字符串的开端有冒号：

window.location.protocol>> "https:"

host属性返回一个形容以后URL的域名以及端口号的字符串。如果应用的默认端口号80，那么端口号通常会被省略：

window.location.host>> "www.sitepoint.com"

hostname属性返回一个形容以后URL域名的字符串：

window.location.hostname>> "www.sitepoint.com"

port属性返回一个形容端口号的字符串，如果端口没有显式地在URL中申明，它将返回空字符串：

window.location.port>> ""

pathname属性返回域名前面的门路字符串：

window.location.pathname>> "/javascript-window-object/"

search属性返回一个以"?"结尾的字符串，前面是查问字符串参数。如果没有查问字符串参数，将会返回空字符串：

window.location.search>> ""

hash属性返回一个以"#"结尾的字符串，前面是片段标识符。如果没有片段标识符，将返回空字符串：

window.location.hash>> ""

origin属性返回一个字符串，展现以后页面起源的协定和域名。这个属性是只读的，所以不能被扭转：

window.location.origin>> "<https://www.sitepoint.com>"

window.location还具备以下办法：

  • reload()办法能够用来强制从新加载以后页面。如果传递参数true，会强制浏览器从服务端从新加载页面，而不是应用缓存的页面。

  • assign()办法能够用来从参数提供的URL中加载另一个资源。比如说：

    window.location.assign('<https://www.sitepoint.com/>')
  • replace()办法与assign()办法作用简直雷同，除了以后页面不会存储于浏览器历史记录中。所以用户不能应用返回按钮进行返回。

  • toString()办法返回一个蕴含整个URL的字符串：

    window.location.toString();>> "<https://www.sitepoint.com/javascript/>"

浏览器历史

window.history属性可用于拜访以后浏览器会话中任何先前拜访过的页面的信息。防止将其与新的HTML5 History API混同。

window.history.length 属性显示在达到以后页面之前曾经拜访了多少个页面。

window.history.go()办法能够用于跳转至指定页面，0示意跳转至以后页面：

window.history.go(1); // 后退一个页面window.history.go(0); // 从新加载以后页面window.history.go(-1); // 后退一个页面

还有window.history.forward()以及window.history.back() 办法，可别离用于后退或后退一个页面，就如同应用了浏览器的后退和后退按钮。

管制窗口

能够应用window.open()办法关上一个新的窗口。该办法接管将要关上的页面URL作为第一个参数，窗口的题目作为第二个参数，以及一系列属性作为第三个参数。这也能够赋值给一个变量，这样窗口就能够在当前的代码中被援用：

const popup = window.open('<https://sitepoint.com>','SitePoint','width=700,height=700,resizable=yes');

close()办法可用于敞开一个窗口，假如你有一个窗口援用：

popup.close();

也能够应用window.moveTo()办法挪动窗口。该办法接管两个参数，别离是窗口要挪动到的屏幕的X轴和Y轴坐标：

window.moveTo(0,0); // 挪动窗口到屏幕的左上角

你能够应用window.resizeTo()办法来调整窗口大小。该办法接管两个参数，用来指定调整后的窗口尺寸的宽度和高度：

window.resizeTo(600,400);

烦人的弹框

这些办法在很大水平上负责给JavaScript一个坏名声，因为它们被用来创立烦人的弹出式窗口，这些窗口通常蕴含侵入性的广告。从可用性的角度来看，调整或移动用户窗口的大小也是一个坏主意。

许多浏览器阻止弹出式窗口，并在某些状况下不容许调用其中的一些办法。例如，如果有一个以上的标签关上，你就不能调整一个窗口的大小。你也不能挪动或调整一个不是用window.open()创立的窗口的大小。

尽量少的应用这些办法是理智的，所以在应用它们之前要认真思考。简直总是会有一个更好的代替计划，而一个优良程序员会致力找到它。

屏幕信息

window.screen对象蕴含了对于浏览器所显示的屏幕的信息。你能够别离应用height和width属性找出屏幕的高度和宽度，单位为像素：

window.screen.height>> 1024window.screen.width>> 1280

availHeight和availWidth可用于查找屏幕的高度和宽度，其中不包含任何操作系统的菜单：

window.screen.availWidth>> 1280window.screen.availHeight>> 995

colorDepth属性可用于查找用户显示器的色彩位深度，只管除了收集用户统计数据外，很少有这样做的用例：

window.screen.colorDepth;>> 24

更实用于挪动平台

屏幕对象对挪动设施有更多的用处。它还容许你做一些事件，如敞开设施的屏幕，检测其方向的变动或将其锁定在一个特定的方向。

审慎应用

上一节中所波及的许多办法和属性在过来被滥用于可疑的流动，如用户代理嗅探，或检测屏幕尺寸以决定是否显示某些元素。这些做法当初曾经被更好的做法所取代了，比方媒体查问和特色检测。

文档对象

每个window对象蕴含一个document对象。该对象有一系列的属性和办法，用来解决曾经加载到窗口的页面。document对象蕴含一些值得关注的办法。

document.write()

write() 办法只是将一串文本写到页面上。如果页面曾经加载，它将彻底替换以后文档：

document.write('Hello, world!');

这将用字符串Hello, world!替换整个文档。能够在字符串中蕴含HTML，这将成为DOM树的一部分。例如，上面这段代码将创立一个<h1>标签节点和一个文本子节点：

document.write('<h1>Hello, world!</h1>');

document.write()办法也能够在文档中的<script>标签内应用，用于将字符串注入到标记中。这不会笼罩页面上的其余HTML。上面的例子将把文本 "Hello, world!"放在<h1>标签内，页面的其余局部将失常显示：

<h1>    <script>document.write("Hello, world!")</script></h1>

document.write()的应用是十分不受欢迎的，因为它只能通过在HTML文档中混合JavaScript来进行应用。依然有一些极其常见的非法用处，但一个杰出的程序员简直不须要应用它。

总结

以上就是无关window对象的所有次要内容，感激你的浏览。如果让你学到了常识，欢送点赞珍藏转发~