理解JavaScript中的window对象
<h2 id="前言">前言</h2><p>每个JavaScript环境都有一个全局对象（global object）。在全局范围内创建的任何变量实际上都是这个对象的属性，而任何函数都是它的方法。在浏览器环境中，全局对象是<code>window</code>对象，它代表了包含网页的浏览器窗口。</p>
<p>在这篇文章中，我们将介绍<code>Window</code>对象的一些重要用途：</p>
<ul>
<li>浏览器对象模型（Browser Object Model）</li>
<li>获取浏览器信息</li>
<li>获取并使用浏览器<code>history</code>对象</li>
<li>创建并控制浏览器窗口</li>
<li>获取屏幕尺寸以及显示细节</li>
</ul>
<h2 id="浏览器对象模型">浏览器对象模型</h2>
<p>浏览器对象模型（简称BOM）是一个属性和方法的集合，包含了关于浏览器和计算机屏幕的信息。比如说，我们可以找出哪个浏览器正在被用来浏览一个页面，尽管这种办法不可靠。我们还可以找出它被浏览的屏幕尺寸，以及在当前页面之前已经访问过哪些页面。它还可以用于创建弹出式窗口这种相当可疑的做法，如果你喜欢惹恼你的用户的话。</p>
<p>BOM没有官方的标准，尽管所有主流浏览器都支持许多属性和方法，但这已经成为了一种事实上的标准。这些属性和方法是通过<code>window</code>对象提供的，每一个浏览器窗口，tab页，弹窗，frame以及iframe都具有<code>window</code>对象。</p>
<h3 id="浏览器环境">浏览器环境</h3>
<p>请记住，JavaScript可以在不同的环境上运行。BOM只在浏览器环境中有意义。这意味着其他环境可能没有<code>window</code>对象，尽管他们仍有全局对象。比如说，Node.js拥有一个称为<code>global</code>的对象。</p>
<p>如果你不知道全局对象的名称，你可以在全局作用域中使用关键字<code>this</code>来引用全局对象。下面的代码提供了一种将变量<code>global</code>赋值给全局对象的快捷方式：</p>
<pre><code class="language-jsx">const global = this;
</code></pre>
<h3 id="深入全局变量">深入全局变量</h3>
<p>全局变量是不使用<code>const</code>、<code>let</code>或<code>var</code>关键字创建的变量。全局变量可以在整个程序中进行访问。</p>
<p>全局变量是全局对象的属性。在浏览器环境中，全局对象就是<code>window</code>对象。这意味着任何创建的全局变量都是<code>window</code>对象的属性，可以从如下示例中看出：</p>
<pre><code class="language-jsx">x = 6;// 创建的全局变量
>> 6
window.x // 同一个变量可以作为window对象的一个属性被访问
>> 6
// window.x === x
>> true
</code></pre>
<p>通常情况下，你应该在不使用<code>window</code>对象的情况下引用全局变量。这样可以减少字符输入，并且你的代码在不同的环境中也更容易移植。如果你需要检查一个全局变量是否已经被定义，则是一个例外。比如说，如果<code>x</code>没有被定义，下面的代码将会抛出<code>ReferenceError</code>错误：</p>
<pre><code class="language-jsx">if (x) {
// do something
}
</code></pre>
<p>然而，如果变量作为<code>window</code>对象的属性进行访问，那么代码仍然可以正常运行，<code>window.x</code>会直接返回<code>false</code>，意味着代码块将不会被执行：</p>
<pre><code class="language-jsx">if (window.x) {
// do something
}
</code></pre>
<p>有些函数比如说<code>parseInt()</code>和<code>isNaN()</code> ，就是全局对象的方法。在浏览器环境中，它们就是<code>window</code>对象的方法。与变量一样，习惯上省略通过<code>window</code>对象而直接访问它们。</p>
<h3 id="对话框">对话框</h3>
<p>在浏览器中，有三个函数用来生成对话框：<code>alert()</code>，<code>confirm()</code>以及<code>prompt()</code>。这些都不是ECMAScript标准的一部分，尽管所有主流浏览器都支持它们作为<code>window</code>对象的方法。</p>
<p><strong>Alert Dialog</strong></p>
<p><code>window.alert()</code>会暂停程序的执行，并在对话框中显示消息。消息被作为参数提供给方法，方法总是返回<code>undefined</code>：</p>
<pre><code class="language-jsx">window.alert('Hello');
>> undefined
</code></pre>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af9aac38848b4b08a086e1b63e219554~tplv-k3u1fbpfcp-watermark.image?"></p>
<p><strong>Confirm dialog</strong></p>
<p><code>window.confirm()</code>方法会停止程序的执行，并显示一个确认对话框。展示作为参数提供的信息，并给出确定或取消的选项。如果用户点击确定，则返回布尔值<code>true</code>，如果用户点击取消，则返回布尔值<code>false</code>：</p>
<pre><code class="language-jsx">window.confirm('Do you wish to continue?');
>> undefined
</code></pre>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b8672a4195d4e049eb25ac0db43dc21~tplv-k3u1fbpfcp-watermark.image?"></p>
<p><strong>Prompt dialog</strong></p>
<p><code>window.prompt()</code> 方法会停止程序的执行，并显示一个对话框。展示作为参数提供的信息，以及一个允许用户输入文本的输入字段。当用户点击确定时，该文本会作为字符串进行返回。如果用户点击取消时，将会返回<code>null</code>：</p>
<pre><code class="language-jsx">window.prompt('Please enter your name:');
</code></pre>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71ba58b146824a55a93b29b21326c176~tplv-k3u1fbpfcp-watermark.image?"></p>
<h3 id="谨慎使用原生对话框">谨慎使用原生对话框</h3>
<p>值得再次强调的是，这些方法会在程序执行过程中让程序停止执行。这意味着在方法被调用的时刻，一切都将停止处理，直到用户点击确认或者取消。如果程序需要同时处理其他东西，或者程序在等待回调函数，那么这种方式就会造成问题。</p>
<p>在一些场合，这种功能因具备一些优势从而可以使用。比如说，<code>window.confirm()</code>对话框可以被用来当做最终确认，检查用户是否想要删除资源。这将阻止程序继续进行并阻止删除资源，直到用户来决定如何处理。</p>
<p>还值得注意的是，大多数浏览器允许用户禁用任意重复出现的对话框，这意味着该功能是不可靠的。</p>
<h2 id="浏览器信息">浏览器信息</h2>
<p><code>window</code>对象有一系列的属性和方法，这些属性和方法提供了有关用户浏览器的信息。</p>
<h3 id="navigator对象">Navigator对象</h3>
<p><code>window</code>对象有一个属性叫做<code>navigator</code>，该属性返回<code>Navigator</code>对象的引用。<code>Navigator</code>对象包含有关正在使用的浏览器的信息。上面的<code>userAgent</code>属性将会返回有关正在使用的浏览器和操作系统的信息。比如说，如果运行下面的代码，它将显示我正在使用Mac OS上的Safari 10版本：</p>
<pre><code class="language-jsx">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"
</code></pre>
<p>不过，不要依赖这些信息，因为用户可以修改这些信息，从而伪装成其他浏览器。对返回的字符串也很难有任何意义，因为在某种程度上，所有的浏览器都会假装成其他浏览器。</p>
<p>比如说，每个浏览器都会在其自身的<code>userAgent</code>属性上包含<code>Mozilla</code>字符串，因为遗留的Netscape兼容性的原因。<code>userAgent</code>已经从官方标准中废弃，但是它仍然在所有主流浏览器中得到很好的支持。</p>
<h3 id="url">URL</h3>
<p><code>window.location</code>是一个对象，该对象包含有关当前页面URL的信息。它包含一些属性，提供关于URL的不同片段的信息。</p>
<p><code>href</code>属性将完整的URL作为字符串进行返回：</p>
<pre><code class="language-jsx">window.location.href
>> "<https://www.sitepoint.com/javascript-window-object/>"
</code></pre>
<p>该属性（以及本节其他大多数属性）是可读/可写属性，这意味着可以通过赋值被更改。如果完成赋值操作，当前页面将会使用新的属性值进行重新加载。比如说，输入下面的代码到浏览器的控制台中，浏览器将会重定向到指定页面：</p>
<pre><code class="language-jsx">window.location.href = '<https://www.sitepoint.com/>'
>> "<https://www.sitepoint.com/>"
</code></pre>
<p><code>protocol</code>属性返回一个描述所使用的协议（比如<code>http</code>, <code>https</code>, <code>pop2</code>, <code>ftp</code>等等）的字符串。注意字符串的末尾有冒号：</p>
<pre><code class="language-jsx">window.location.protocol
>> "https:"
</code></pre>
<p><code>host</code>属性返回一个描述当前URL的域名以及端口号的字符串。如果使用的默认端口号80，那么端口号通常会被省略：</p>
<pre><code class="language-jsx">window.location.host
>> "www.sitepoint.com"
</code></pre>
<p><code>hostname</code>属性返回一个描述当前URL域名的字符串：</p>
<pre><code class="language-jsx">window.location.hostname
>> "www.sitepoint.com"
</code></pre>
<p><code>port</code>属性返回一个描述端口号的字符串，如果端口没有显式地在URL中声明，它将返回空字符串：</p>
<pre><code class="language-jsx">window.location.port
>> ""
</code></pre>
<p><code>pathname</code>属性返回域名后面的路径字符串：</p>
<pre><code class="language-jsx">window.location.pathname
>> "/javascript-window-object/"
</code></pre>
<p><code>search</code>属性返回一个以"?"开头的字符串，后面是查询字符串参数。如果没有查询字符串参数，将会返回空字符串：</p>
<pre><code class="language-jsx">window.location.search
>> ""
</code></pre>
<p><code>hash</code>属性返回一个以"#"开头的字符串，后面是片段标识符。如果没有片段标识符，将返回空字符串：</p>
<pre><code class="language-jsx">window.location.hash
>> ""
</code></pre>
<p><code>origin</code>属性返回一个字符串，展示当前页面来源的协议和域名。这个属性是只读的，所以不能被改变：</p>
<pre><code class="language-jsx">window.location.origin
>> "<https://www.sitepoint.com>"
</code></pre>
<p><code>window.location</code>还具有以下方法：</p>
<ul>
<li>
<p><code>reload()</code>方法可以用来强制重新加载当前页面。如果传递参数<code>true</code>，会强制浏览器从服务端重新加载页面，而不是使用缓存的页面。</p>
</li>
<li>
<p><code>assign()</code>方法可以用来从参数提供的URL中加载另一个资源。比如说：</p>
<pre><code class="language-jsx">window.location.assign('<https://www.sitepoint.com/>')
</code></pre>
</li>
<li>
<p><code>replace()</code>方法与<code>assign()</code>方法作用几乎相同，除了当前页面不会存储于浏览器历史记录中。所以用户不能使用返回按钮进行返回。</p>
</li>
<li>
<p><code>toString()</code>方法返回一个包含整个URL的字符串：</p>
<pre><code class="language-jsx">window.location.toString();
>> "<https://www.sitepoint.com/javascript/>"
</code></pre>
</li>
</ul>
<h2 id="浏览器历史">浏览器历史</h2>
<p><code>window.history</code>属性可用于访问当前浏览器会话中任何先前访问过的页面的信息。避免将其与新的HTML5 History API混淆。</p>
<p><code>window.history.length</code> 属性显示在到达当前页面之前已经访问了多少个页面。</p>
<p><code>window.history.go()</code>方法可以用于跳转至指定页面，0表示跳转至当前页面：</p>
<pre><code class="language-jsx">window.history.go(1); // 前进一个页面
window.history.go(0); // 重新加载当前页面
window.history.go(-1); // 后退一个页面
</code></pre>
<p>还有<code>window.history.forward()</code>以及<code>window.history.back()</code> 方法，可分别用于前进或后退一个页面，就好像使用了浏览器的前进和后退按钮。</p>
<h2 id="控制窗口">控制窗口</h2>
<p>可以使用<code>window.open()</code>方法打开一个新的窗口。该方法接收将要打开的页面URL作为第一个参数，窗口的标题作为第二个参数，以及一系列属性作为第三个参数。这也可以赋值给一个变量，这样窗口就可以在以后的代码中被引用：</p>
<pre><code class="language-jsx">const popup = window.open('<https://sitepoint.com>','SitePoint','width=700,height=700,resizable=yes');
</code></pre>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8fc6c2240fa4e6fb2535fa84320b5c2~tplv-k3u1fbpfcp-watermark.image?"></p>
<p><code>close()</code>方法可用于关闭一个窗口，假设你有一个窗口引用：</p>
<pre><code class="language-jsx">popup.close();
</code></pre>
<p>也可以使用<code>window.moveTo()</code>方法移动窗口。该方法接收两个参数，分别是窗口要移动到的屏幕的X轴和Y轴坐标：</p>
<pre><code class="language-jsx">window.moveTo(0,0);
// 移动窗口到屏幕的左上角
</code></pre>
<p>你可以使用<code>window.resizeTo()</code>方法来调整窗口大小。该方法接收两个参数，用来指定调整后的窗口尺寸的宽度和高度：</p>
<pre><code class="language-jsx">window.resizeTo(600,400);
</code></pre>
<h3 id="烦人的弹框">烦人的弹框</h3>
<p>这些方法在很大程度上负责给JavaScript一个坏名声，因为它们被用来创建烦人的弹出式窗口，这些窗口通常包含侵入性的广告。从可用性的角度来看，调整或移动用户窗口的大小也是一个坏主意。</p>
<p>许多浏览器阻止弹出式窗口，并在某些情况下不允许调用其中的一些方法。例如，如果有一个以上的标签打开，你就不能调整一个窗口的大小。你也不能移动或调整一个不是用<code>window.open()</code>创建的窗口的大小。</p>
<p>尽量少的使用这些方法是明智的，所以在使用它们之前要仔细考虑。几乎总是会有一个更好的替代方案，而一个优秀程序员会努力找到它。</p>
<h2 id="屏幕信息">屏幕信息</h2>
<p><code>window.screen</code>对象包含了关于浏览器所显示的屏幕的信息。你可以分别使用<code>height</code>和<code>width</code>属性找出屏幕的高度和宽度，单位为像素：</p>
<pre><code class="language-jsx">window.screen.height
>> 1024
window.screen.width
>> 1280
</code></pre>
<p><code>availHeight</code>和<code>availWidth</code>可用于查找屏幕的高度和宽度，其中不包括任何操作系统的菜单：</p>
<pre><code class="language-jsx">window.screen.availWidth
>> 1280
window.screen.availHeight
>> 995
</code></pre>
<p><code>colorDepth</code>属性可用于查找用户显示器的颜色位深度，尽管除了收集用户统计数据外，很少有这样做的用例：</p>
<pre><code class="language-jsx">window.screen.colorDepth;
>> 24
</code></pre>
<h3 id="更适用于移动平台">更适用于移动平台</h3>
<p>屏幕对象对移动设备有更多的用途。它还允许你做一些事情，如关闭设备的屏幕，检测其方向的变化或将其锁定在一个特定的方向。</p>
<h3 id="谨慎使用">谨慎使用</h3>
<p>上一节中所涉及的许多方法和属性在过去被滥用于可疑的活动，如用户代理嗅探，或检测屏幕尺寸以决定是否显示某些元素。这些做法现在已经被更好的做法所取代了，比如媒体查询和特征检测。</p>
<h2 id="文档对象">文档对象</h2>
<p>每个<code>window</code>对象包含一个<code>document</code>对象。该对象有一系列的属性和方法，用来处理已经加载到窗口的页面。<code>document</code>对象包含一些值得关注的方法。</p>
<h3 id="documentwrite">document.write()</h3>
<p><code>write()</code> 方法只是将一串文本写到页面上。如果页面已经加载，它将彻底替换当前文档：</p>
<pre><code class="language-jsx">document.write('Hello, world!');
</code></pre>
<p>这将用字符串<code>Hello, world!</code>替换整个文档。可以在字符串中包含HTML，这将成为DOM树的一部分。例如，下面这段代码将创建一个<code><h1></code>标签节点和一个文本子节点：</p>
<pre><code class="language-jsx">document.write('<h1>Hello, world!</h1>');
</code></pre>
<p><code>document.write()</code>方法也可以在文档中的<code><script></code>标签内使用，用于将字符串注入到标记中。这不会覆盖页面上的其他HTML。下面的例子将把文本 <code>"Hello, world!"</code>放在<code><h1></code>标签内，页面的其他部分将正常显示：</p>
<pre><code class="language-html"><h1>
<script>document.write("Hello, world!")</script>
</h1>
</code></pre>
<p><code>document.write()</code>的使用是非常不受欢迎的，因为它只能通过在HTML文档中混合JavaScript来进行使用。仍然有一些极其罕见的合法用途，但一个出色的程序员几乎不需要使用它。</p>
<h2 id="总结">总结</h2>
<p>以上就是有关<code>window</code>对象的所有主要内容，感谢你的阅读。如果让你学到了知识，欢迎点赞收藏转发~</p><br><br>
来源：https://www.cnblogs.com/chuckQu/p/16526614.html
頁:
[1]