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对象还有很多其他的属性和方法,可以根据实际需要进行掌握和使用。