浏览器内置对象 window 用法集锦，看这篇就够了

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 javascript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

上面文章带大家看了浏览器内置对象的所有知识点，这篇文章瑶琴开始带大家详细学习这些内置对象，本篇文章介绍的是：window对象。

window 对象是JavaScript中全局的作用域，代表了浏览器的窗口。它是最顶层的对象，所有其他对象都是它的属性，或者是由它创建的。window 对象不仅包含了浏览器窗口的属性和方法，还是通过它我们可以访问到其他重要的内置对象，如document、location、history等。

以下是window对象的一些重要属性和方法：

属性：

window.innerHeight - 返回窗口视口的内部高度，不包括工具栏和滚动条。

window.innerWidth - 返回窗口视口的内部宽度。

window.outerHeight - 返回整个浏览器窗口的高度，包括工具栏和滚动条。

window.outerWidth - 返回整个浏览器窗口的宽度。

window.location - 提供当前页面的URL信息，可以读取或修改它来改变当前页面。

window.history - 允许操作浏览器的历史记录，例如前进、后退或添加状态。

window.document - 当前窗口中加载的文档对象。

window.navigator - 包含有关用户浏览器的信息。

方法：

window.alert() - 显示一个警告框，并带有一条消息。

window.confirm() - 显示一个确认框，用户可以选择“确定”或“取消”。

window.prompt() - 显示一个输入框，用户可以输入一些文本。

window.open() - 打开一个新的浏览器窗口或标签页。

window.close() - 关闭当前浏览器窗口或标签页。

window.scrollTo() - 滚动到页面的指定位置。

window.setTimeout() 和 window.setInterval() - 分别用于设置一个定时器，当指定的毫秒数过后执行一个函数一次或多次。

示例：使用 window.innerHeight 和 window.innerWidth：

const height = window.innerHeight; 
const width = window.innerWidth; 
console.log(`The window height is ${height}px and the width is ${width}px.`);

使用 window.location 来改变当前页面：

window.location.href = 'https://www.example.com'; // 重定向到新的URL

使用 window.history 来后退：

window.history.back(); // 后退到历史记录中的上一页

使用 window.open() 打开新窗口：

const newWindow = window.open('https://www.example.com', 'newWindow', 'width=400,height=300'); 
if (newWindow) { 
    newWindow.document.write('<h1>Welcome to the new window!</h1>'); 
} else { 
    console.log('Unable to open a new window'); 
}

使用 window.setTimeout() 来设置一个定时器：

function greet() { 
    console.log('Hello after 2 seconds!'); 
} 
window.setTimeout(greet, 2000); // 2000毫秒或2秒后执行greet函数

window 对象非常强大，包含了许多其他属性和方法，上面列出的是开发过程中常用的window属性和方法，了解和掌握这些属性和方法对于进行前端开发非常重要。

初学者不需要死记硬背，用的多了，自然就熟练了。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。