JavaScript - Window 对象

上一页
下一页

JavaScript window 对象表示浏览器的窗口。在 JavaScript 中，'window' 对象是一个全局对象。它包含我们可以用来访问和操作当前浏览器窗口的各种方法和属性。例如，显示警报、打开新窗口、关闭当前窗口等。

所有 JavaScript 全局变量都是 window 对象的属性。所有全局函数都是 window 对象的方法。此外，当浏览器在 'iframe' 中呈现内容时，它会为浏览器和每个 iframe 创建一个单独的 'window' 对象。

在这里，您将学习如何将 'window' 对象用作全局对象，并使用 window 对象的属性和方法。

Window 对象作为全局对象

由于 'window' 是 Web 浏览器中的全局对象，因此您可以在代码中的任何位置使用 window 对象访问全局变量、函数、对象等。

让我们通过下面的示例来理解它。

例

在下面的代码中，我们在函数中定义了 'num' 全局变量和局部变量。此外，我们还定义了 'car' 全局对象。

在 test（） 函数中，我们使用 'window' 对象访问全局 num 变量的值。


<html>
<body>
	 	<div id = "output1">The value of the global num variable is: </div>
	 	<div id = "output2">The value of the local num variable is: </div>
	 	<div id = "output3">The value of the car object is: </div>
	 	<script>
	 	 	 var num = 100;
	 	 	 const car = {
	 	 	 	 	brand: "Honda",
	 	 	 	 	model: "city",
	 	 	 }

	 	 	 function test() {
	 	 	 	 	let num = 300;
	 	 	 	 	document.getElementById("output1").innerHTML += window.num;
	 	 	 	 	document.getElementById("output2").innerHTML += num;
	 	 	 	 	document.getElementById("output3").innerHTML += car.brand;
	 	 	 }
	 	 	 test();
	 	</script>
</body>
</html>

输出

The value of the global num variable is: 100
The value of the local num variable is: 300
The value of the car object is: Honda

你也可以使用 'window' 对象使特定变量从特定块变为全局变量。

Window 对象属性

'window' 对象包含各种属性，返回有关当前窗口的状态和信息。

下面，我们通过描述介绍了 'window' 对象的所有属性。您可以使用 'window' 作为访问这些属性的参考。

属性名称 属性描述
closed 当特定窗口关闭时，它将返回 true。
console 返回窗口的 console 对象。
customElements 用于定义和访问浏览器窗口中的自定义元素。
devicePixelRatio 返回设备的物理像素比除以 CSS 像素比。
document 用于访问在当前窗口中打开的 HTML 文档。
frames 用于获取在当前窗口中打开的窗口项（如 iframe）。
frameElement 返回窗口的当前帧。
history 用于获取窗口的 history 对象。
innerHeight 返回窗口的内部高度，不包括滚动条、工具栏等。
innerWidth 返回窗口的内部宽度，不包括滚动条、工具栏等。
length 返回当前窗口中的 iframe 总数。
localStorage 用于访问当前窗口的本地存储。
location 用于访问当前窗口的 location 对象。
name 用于获取或设置窗口的名称。
navigator 用于获取浏览器的 Navigator 对象。
opener 返回对打开当前窗口的窗口的引用。
outerHeight 返回窗口的总高度。
outerWidth 返回窗口的总宽度。
pageXOffset 返回您水平滚动网页的像素数。
pageYOffset 返回您垂直滚动网页的像素数。
parent 包含对当前窗口的父窗口的引用。
scheduler 使用优先任务计划的入口点。
screen 返回当前窗口的 'screen' 对象。
screenLeft 返回当前窗口相对于屏幕的 x 坐标位置（以像素为单位）。
screenTop 返回当前窗口相对于屏幕的 y 坐标位置（以像素为单位）。
screenX 类似于 screenLeft 属性。
screenY 类似于 screenTop 属性。
scrollX 类似于 pageXOffset。
scrollY 类似于 pageYOffset。
self 用于获取窗口的当前状态。
sessionStorage 允许你访问当前窗口的 'sessionStorage' 对象。
speechSynthesis 允许您使用 Web 语音 API。
visualViewPort 返回包含当前窗口视区的对象。
top 包含对最顶层窗口的引用。

在这里，我们将通过示例介绍一些属性。

Window 对象的 OuterHeight/OuterWidth 属性

window 对象的 outerHeight 属性返回窗口的高度，window 对象的 outerWidth 属性返回窗口的宽度。

例

在下面的代码中，我们使用了 outerHeight 和 outerWidth 属性来获取窗口的尺寸。您可以更改窗口的大小并观察这些属性的值的变化。


<html>
<body>
	 	<p id = "output1">The outer width of the window is: </p>
	 	<p id = "output2">The outer height of the window is: </p>
	 	<script>
	 	 	 const outerHeight = window.outerHeight;
	 	 	 const outerWidth = window.outerWidth;
	 	 	 document.getElementById("output1").innerHTML += outerWidth;
	 	 	 document.getElementById("output2").innerHTML += outerHeight;
	 	</script>
</body>
</html>

输出

The outer width of the window is: 1536
The outer height of the window is: 816

Window 对象的 ScreenLeft 属性

window screenLeft 属性返回当前窗口的左侧位置。

例

在下面代码的输出中，您可以看到当前窗口的左侧位置（以像素为单位）。


<html>
<body>
	 	<div id = "output">Your browser window is left by: 	</div>
	 	<script>
	 	 	 const screenLeft = window.screenLeft;
	 	 	 document.getElementById("output").innerHTML += screenLeft + " px.";
	 	</script>
</body>
</html>

输出

Your browser window is left by: 0 px.

Window 对象方法

'window' 对象还包含用于操作当前浏览器窗口的方法，例如属性。

在下表中，我们介绍了 'window' 对象的方法及其描述。你可以使用 'window' 作为引用来访问和调用以下方法，以使代码可读。

方法名称 方法描述
alert() 用于向访客显示警报消息。
atob() 将字符串转换为 base-64 字符串。
blur() 从窗口中删除焦点。
btoa() 解码普通字符串中的 base-64 字符串。
cancelAnimationFrame() 取消使用 requestAnimationFrame（） 方法计划的动画帧。
cancelIdleCallback() 取消使用 requestIdCallback（） 方法安排的回调。
clearImmediate() 用于清除使用 setImmediate（） 方法指定的操作。
clearInterval() 重置您使用 setInterval（） 方法设置的计时器。
clearTimeout() 停止您使用 setTimeOut（） 方法设置的超时。
close() 用于关闭当前窗口。
confirm() 显示确认框以从用户那里获取确认。
focus() 侧重于当前活动窗口。
getComputedStyle() 返回当前窗口的计算 CSS 样式。
getSelection() 根据所选文本范围返回选择对象。
matchMedia() 返回一个新的 MediaQueryList 对象，您可以使用该对象来检查文档是否与媒体查询匹配。
moveBy() 更改窗口相对于当前位置的位置。
moveTo() 绝对改变了窗口的位置。
open() 将打开一个新窗口。
postMessage() 用于向窗口发送消息。
print() 允许您打印窗口。
prompt() 允许您显示提示框以获取用户输入。
requestAnimationFrame() 可以帮助您告诉浏览器您要执行动画，以便浏览器可以在下一次重绘之前更新动画。
requestIdleCallback() 设置了在浏览器空闲时调用的回调函数。
resizeBy() 按特定数量的像素调整窗口大小。
resizeTo() 更改窗口的大小。
scrollTo() 将窗口滚动到绝对位置。
scrollBy() 相对于当前位置滚动窗口。
setImmediate() 会分解长时间运行的操作，并在浏览器完成其他操作时立即运行回调函数。
setInterval() 在每个间隔后执行特定操作。
setTimeout() 在特定时间后执行特定操作。
stop() 停止加载 window。

在这里，我们将通过示例介绍一些方法。

JavaScript window.alert（） 方法

window.alert（） 方法允许您显示包含消息、警告等的弹出对话框。它将字符串 text 作为参数。

例

在下面的示例中，当您单击该按钮时，它将调用 alert_func（） 函数并在中间顶部显示弹出框。


<html>
<body>
	 	<button onclick = "alert_func()"> Execute Alert </button>
	 	<script>
	 	 	 function alert_func() {
	 	 	 	 	window.alert("The alert_func funciton is executed!");
	 	 	 }
	 	</script>
</body>
</html>

JavaScript window.open（） 方法

window.open（） 方法用于打开一个新窗口。它采用 URL 作为参数，您需要在新窗口中打开该参数。

例

在下面的代码中，我们使用 window.open（） 方法在浏览器中打开一个新窗口。您可以看到，该代码在新窗口中打开了 'qikepuc' 网站的主页。


<html>
<body>
	 	<button onclick = "openWindow()"> Open New Window </button>
	 	<script>
	 	 	 function openWindow() {
	 	 	 	 	window.open("https://www.qikepu.com/");
	 	 	 }
	 	</script>
</body>
</html>

JavaScript window.print（） 方法

window.print（） 方法允许您打印网页。

例

在下面的代码中，单击按钮打印网页。


<html>
<body>
	 	<h2> Hello World! </h2>
	 	<button onclick = "printPage()"> Print Webpage </button>
	 	<script>
	 	 	 function printPage() {
	 	 	 	 	window.print();
	 	 	 }
	 	</script>
</body>
</html>
打印本页
上一页
下一页