前端知识点---Window对象(javascript)了解

Window对象

在JavaScript中，当你在非严格模式下的全局作用域中使用this时，它会引用全局对象。在浏览器环境中，这个全局对象就是Window。

01什么是 Window 对象？

Window 是浏览器提供的一个全局对象，它代表了浏览器的窗口或框架（frame）。它既是浏览器的全局执行环境，也是一个包含大量属性和方法的对象。这些属性和方法为你提供了操作浏览器窗口和管理文档内容的功能。

var a = 10;   // 等价于 window.a = 10;
console.log(window.a);  // 输出 10

function sayHello() {
  console.log("Hello, world!");
}

window.sayHello();  // 等价于 sayHello();

02. Window 的主要功能

Window 对象提供了一系列属性和方法，可以用于控制窗口、处理事件、操控页面等。

2.1 窗口管理相关

window.open(url, target, specs) 打开新窗口或新标签。

window.open('https://www.example.com', '_blank', 'width=500,height=500');
window.close() 关闭当前窗口（仅对脚本打开的窗口有效）。

window.moveTo(x, y) 移动窗口到指定位置。

window.resizeTo(width, height) 调整窗口大小。

2.2 浏览器信息

window.location 提供当前页面 URL 的信息，并允许修改 URL 以实现页面跳转。

console.log(window.location.href);  // 当前页面的 URL
window.location.href = 'https://www.baidu.com';  // 跳转到新页面
window.navigator 提供关于浏览器的信息（如用户代理、语言等）。


console.log(window.navigator.userAgent);  // 打印用户代理字符串
console.log(window.navigator.language);   // 打印浏览器语言
window.history 用于操作浏览器的历史记录。


window.history.back();  // 后退到上一页
window.history.forward();  // 前进到下一页

2.3 与用户交互

window.alert(message) 显示一个警告框。

window.alert("这是一个警告框！");
window.confirm(message) 显示一个确认框，返回 true 或 false。


if (window.confirm("确定要继续吗？")) {
  console.log("用户选择了确定");
} else {
  console.log("用户选择了取消");
}
window.prompt(message, defaultValue) 显示一个输入框，返回用户输入的值。


const name = window.prompt("请输入你的名字：", "匿名");
console.log(`你好, ${name}!`);

2.4 计时器

window.setTimeout(callback, delay) 在指定时间后执行一次函数。

setTimeout(() => {
  console.log("3秒后执行这段代码");
}, 3000);
window.setInterval(callback, interval) 每隔指定时间执行一次函数。


setInterval(() => {
  console.log("每2秒执行一次");
}, 2000);
window.clearTimeout(timeoutID) 和 window.clearInterval(intervalID) 取消 setTimeout 或 setInterval 的执行。

2.5 事件处理

window.addEventListener(event, handler) 给 Window 对象绑定事件监听器。

window.addEventListener('resize', () => {
  console.log('窗口大小发生变化');
});

window.addEventListener('load', () => {
  console.log('页面加载完成');
});
window.removeEventListener(event, handler) 移除事件监听器。

2.6 文档和 DOM 访问

window.document document 对象是 Window 的属性，表示当前加载的 HTML 文档。它是操作 DOM（文档对象模型）的主要入口。

console.log(window.document.title);  // 获取当前页面标题
document.body.style.backgroundColor = "lightblue";  // 改变页面背景色