JavaScript中window对象常用方法总结-猿码集

1. window对象简介

window对象是JavaScript中的全局对象，可以通过window对象访问浏览器的窗口、框架、弹出框等相关属性和方法。在JavaScript中，所有全局变量和函数都是window对象的属性和方法。因此，window对象在JavaScript编程中起着非常重要的作用。

2. window对象的常用属性

2.1 outerHeight和outerWidth

outerHeight和outerWidth属性返回浏览器窗口的高度和宽度，包括边框和滚动条等。以下代码展示了如何获取浏览器窗口的高度和宽度。


let height = window.outerHeight;
let width = window.outerWidth;
console.log("浏览器窗口的高度为：" + height);
console.log("浏览器窗口的宽度为：" + width);

浏览器返回的结果是一个整数，单位为像素。

2.2 innerHeight和innerWidth

innerHeight和innerWidth属性返回浏览器窗口的视口（viewport）高度和宽度，不包括边框和滚动条等。以下代码展示了如何获取浏览器窗口的视口高度和宽度。


let height = window.innerHeight;
let width = window.innerWidth;
console.log("浏览器窗口视口的高度为：" + height);
console.log("浏览器窗口视口的宽度为：" + width);

视口是指浏览器实际显示网页内容的区域，它的大小可以通过调整浏览器窗口大小来改变。

2.3 screen

screen属性返回客户端显示器的宽度、高度、颜色深度等相关信息。以下代码展示了如何获取客户端显示器的相关信息。


let screenHeight = window.screen.height;
let screenWidth = window.screen.width;
let colorDepth = window.screen.colorDepth;
console.log("客户端显示器的高度为：" + screenHeight);
console.log("客户端显示器的宽度为：" + screenWidth);
console.log("客户端显示器的颜色深度为：" + colorDepth);

3. window对象的常用方法

3.1 alert()

alert()方法可以在浏览器中弹出一个警告框，用于向用户显示一条警告消息。以下代码展示了如何使用alert()方法。


alert("这是一条警告消息！");

当alert()方法被调用时，浏览器会在屏幕上弹出一个带有一段文本的窗口。如果用户单击“确定”按钮，则警告框将关闭，并继续执行JavaScript代码。如果用户单击“取消”按钮，则警告框将保持打开状态，直到用户单击“确定”按钮。

3.2 prompt()

prompt()方法可以在浏览器中弹出一个带有输入框的窗口，用于向用户获取一段文本输入。以下代码展示了如何使用prompt()方法。


let name = prompt("请输入您的姓名：", "张三");
console.log("您输入的姓名是：" + name);

当prompt()方法被调用时，浏览器会在屏幕上弹出一个带有输入框的窗口。用户可以在输入框中输入一些文本，然后单击“确定”或“取消”按钮来关闭窗口。

3.3 confirm()

confirm()方法可以在浏览器中弹出一个带有确认和取消按钮的窗口，用于向用户获取一个二选一的选择结果。以下代码展示了如何使用confirm()方法。


let result = confirm("您确定要删除该文件吗？");
if (result) {
    console.log("文件已删除！");
} else {
    console.log("文件未被删除！");
}

当confirm()方法被调用时，浏览器会在屏幕上弹出一个带有确认和取消按钮的窗口。如果用户单击“确定”按钮，则返回值为true；如果用户单击“取消”按钮，则返回值为false。

3.4 setTimeout()

setTimeout()方法可以在指定的时间之后执行一段JavaScript代码。以下代码展示了如何使用setTimeout()方法。


setTimeout(function() {
    console.log("三秒钟已经过去！");
}, 3000);

当setTimeout()方法被调用时，它会在指定的时间之后执行第一个参数中的JavaScript代码。setTimeout()方法的第二个参数是时间，单位为毫秒。

3.5 setInterval()

setInterval()方法可以按照指定的时间间隔，重复执行一段JavaScript代码。以下代码展示了如何使用setInterval()方法。


let i = 0;
let timer = setInterval(function() {
    i++;
    console.log("现在的数字是：" + i);
    if (i === 10) {
        clearInterval(timer);
    }
}, 1000);

当setInterval()方法被调用时，它会按照第二个参数指定的时间间隔执行第一个参数中的JavaScript代码。当执行次数达到第一个参数设定的数字时，可以使用clearInterval()方法来停止setInterval()方法的执行。

3.6 open()

open()方法可以打开一个新的浏览器窗口或标签页面，其第一个参数是URL地址，第二个参数是窗口的名称（如果已有窗口或标签页的名称和第二个参数相同，则在该窗口或标签页中打开URL地址，而不会打开一个新的窗口或标签页）。以下代码展示了如何使用open()方法。


window.open("http://www.google.com", "谷歌搜索");

当open()方法被调用时，浏览器会尝试打开一个新的浏览器窗口或标签页面，然后在其中加载指定的URL地址。

3.7 close()

close()方法可以关闭当前浏览器窗口或标签页。以下代码展示了如何使用close()方法。


window.close();

当close()方法被调用时，浏览器将关闭当前窗口或标签页。

4. 总结

本文介绍了JavaScript中window对象的常用属性和方法，包括outerHeight、outerWidth、innerHeight、innerWidth、screen、alert()、prompt()、confirm()、setTimeout()、setInterval()、open()和close()等。这些属性和方法可以帮助我们在JavaScript编程中更好地控制浏览器窗口和网页内容。

JavaScript中window对象常用方法总结