Window 对象


Window对象技术文档

什么是Window对象

Window对象是JavaScript中的一个预定义对象,代表了我们当前页面的浏览器窗口。它包含了浏览器窗口的所有信息,例如窗口的大小、位置、地址栏等等,同时它还提供了许多方法可以帮助我们操作浏览器窗口的内容。

Window对象的属性

name

Window对象的name属性返回页面的名称或者窗口的名称,可以通过该属性来获取当前窗口的名称或者设置当前窗口的名称。

// 获取当前窗口的名称
let winName = window.name;
console.log(winName);

// 设置当前窗口的名称
window.name = 'myWindow';

innerWidth / innerHeight

Window对象的innerWidth属性和innerHeight属性分别返回窗口的宽度和高度,不包括边框和滚动条。

// 获取当前窗口的宽度和高度
let winWidth = window.innerWidth;
let winHeight = window.innerHeight;
console.log(winWidth, winHeight);

outerWidth / outerHeight

Window对象的outerWidth属性和outerHeight属性分别返回窗口的宽度和高度,包括边框和滚动条。

// 获取当前窗口的宽度和高度
let winWidth = window.outerWidth;
let winHeight = window.outerHeight;
console.log(winWidth, winHeight);

location

Window对象的location属性返回当前窗口的URL信息。我们可以通过该属性来获取当前页面的URL地址,也可以通过该属性来重定向页面。

// 获取当前页面的URL地址
let url = window.location.href;
console.log(url);

// 重定向页面
window.location.href = 'https://www.baidu.com';

history

Window对象的history属性返回当前窗口的浏览历史记录。我们可以通过该属性来操作浏览器的前进和后退功能。

// 后退一页
window.history.back();

// 前进一页
window.history.forward();

// 后退两页
window.history.go(-2);

Window对象的方法

alert()

Window对象的alert()方法弹出一个警告框,用于向用户显示一些重要的提示信息。

// 弹出一个警告框
window.alert('Hello World');

confirm()

Window对象的confirm()方法弹出一个确认框,用户可以选择一个确定或取消按钮。

// 弹出一个确认框
let result = window.confirm('Are you sure?');
if (result) {
    console.log('用户点击了确定按钮');
} else {
    console.log('用户点击了取消按钮');
}

prompt()

Window对象的prompt()方法弹出一个提示框,用户可以在其中输入一些信息。

// 弹出一个提示框
let name = window.prompt('请输入您的姓名:');
console.log(name);

open()

Window对象的open()方法打开一个新的浏览器窗口。

// 打开一个新的浏览器窗口
window.open('https://www.baidu.com', '_blank', 'width=500,height=400');

close()

Window对象的close()方法关闭当前浏览器窗口。

// 关闭当前浏览器窗口
window.close();

总结

Window对象是非常重要的一个预定义对象,它包含了我们当前页面的浏览器窗口的所有信息,并提供了许多方法来操作浏览器窗口的内容。除了上述我们介绍的属性和方法,Window对象还有很多其他的属性和方法,可以根据实际需要进行掌握和使用。