📜  窗口对象 - Javascript (1)

📅  最后修改于: 2023-12-03 14:56:37.729000             🧑  作者: Mango

窗口对象 - Javascript

窗口对象(Window object)是Javascript中最顶层的对象,代表着浏览器中的一个窗口或一个新开的标签页,它提供了一系列的方法和属性,可以让我们控制浏览器窗口的各种行为。

属性
1. window.outerWidth/outerHeight

用于获取浏览器窗口的外部宽度和高度,包括边框和工具栏等无内容区域的部分。

2. window.innerWidth/innerHeight

用于获取浏览器窗口的内部宽度和高度,不包括边框和工具栏等无内容区域的部分。

3. window.screenX/screenY

用于获取浏览器窗口在屏幕上的位置。

4. window.location

用于获取当前浏览器窗口中页面的URL地址,也可以通过该属性改变当前页面的URL地址。

5. window.history

用于访问浏览器的会话历史记录,可以通过该属性向前或向后访问之前浏览过的页面。

6. window.document

用于获取当前页面的DOM树,可以通过该属性对页面进行操作。

方法
1. window.alert()

用于显示一个带有一段消息和一个确认按钮的警告框。

window.alert('Hello World!');
2. window.prompt()

用于显示一个带有一段文本和一个输入框以及确认和取消按钮的消息框,可以用于获取用户的输入。

let name = window.prompt('请输入您的姓名:');
3. window.confirm()

用于显示一个带有一段消息和确认和取消按钮的消息框,可以用于确认用户的选择。

if (window.confirm('您确定要删除该记录吗?')) {
    // 删除记录
} else {
    // 取消删除
}
4. window.open()

用于在新窗口或标签页打开一个URL地址。

let win = window.open('https://www.baidu.com', '_blank');
事件
1. onload事件

当页面加载完成后触发该事件。

window.onload = function() {
    console.log('页面加载完成!');
};
2. onunload事件

当页面关闭或刷新时触发该事件。

window.onunload = function() {
    console.log('页面即将关闭!');
};
3. onresize事件

当浏览器窗口大小改变时触发该事件。

window.onresize = function() {
    console.log('窗口大小已改变!');
};
总结

窗口对象是Javascript中最顶层的对象,它提供了丰富的属性、方法和事件,可以方便地控制浏览器窗口的各种行为。在开发Web应用时,经常需要使用窗口对象来实现一些交互效果和页面跳转等功能,因此对窗口对象的掌握是非常重要的。