跳到主要内容

JavaScript Window对象

在JavaScript中,Window对象是浏览器对象模型(BOM)的核心。它代表浏览器的窗口,是所有JavaScript全局对象、函数和变量的顶层容器。了解Window对象对于网页交互和动态内容创建至关重要。

Window对象介绍

Window对象是浏览器中的全局对象,它具有双重角色:

  1. 它是JavaScript代码的全局作用域对象
  2. 它代表包含DOM文档的浏览器窗口

当你在JavaScript中声明全局变量或函数时,实际上它们是Window对象的属性和方法。

javascript
var message = "Hello World";
console.log(window.message); // 输出: "Hello World"

function sayHello() {
alert("Hello!");
}
window.sayHello(); // 等同于直接调用sayHello()
备注

在全局作用域中,可以省略window前缀来访问Window对象的属性和方法,因为它是默认对象。

Window对象的常用属性

1. window.document

代表当前加载的文档,是DOM的入口点。

javascript
// 修改文档背景颜色
window.document.body.style.backgroundColor = "lightblue";

// 或者简写为
document.body.style.backgroundColor = "lightblue";

2. window.location

提供当前窗口中加载的文档的URL信息,也可用于导航。

javascript
// 显示当前URL
console.log(window.location.href); // 输出: 当前页面的完整URL

// 重定向到新页面
window.location.href = "https://www.example.com";

3. window.innerHeight 和 window.innerWidth

提供浏览器窗口内容区域的高度和宽度。

javascript
// 获取浏览器窗口的视口尺寸
let height = window.innerHeight;
let width = window.innerWidth;
console.log(`窗口高度: ${height}px, 窗口宽度: ${width}px`);

4. window.localStorage 和 window.sessionStorage

提供存储在浏览器中的键值对数据存储机制。

javascript
// localStorage示例 - 数据持久保存
localStorage.setItem("username", "John");
console.log(localStorage.getItem("username")); // 输出: John

// sessionStorage示例 - 数据在会话结束后删除
sessionStorage.setItem("temporaryData", "Some data");
console.log(sessionStorage.getItem("temporaryData")); // 输出: Some data

Window对象的常用方法

1. window.alert(), window.confirm() 和 window.prompt()

这些方法提供与用户交互的对话框。

javascript
// 显示警告框
window.alert("这是一个警告!");

// 确认框 - 返回布尔值
let isConfirmed = window.confirm("你确定要继续吗?");
console.log(isConfirmed ? "用户点击了确定" : "用户点击了取消");

// 提示框 - 返回用户输入的文本或null
let name = window.prompt("请输入你的名字:", "默认名称");
console.log(name ? `你好, ${name}!` : "你没有输入名字");

2. window.open() 和 window.close()

用于打开新窗口和关闭当前窗口。

javascript
// 打开新窗口
let newWindow = window.open("https://www.example.com", "_blank", "width=500,height=400");

// 关闭窗口
if (newWindow) {
// 3秒后关闭新打开的窗口
setTimeout(() => {
newWindow.close();
}, 3000);
}

3. window.setTimeout() 和 window.setInterval()

用于延迟执行代码和重复执行代码。

javascript
// 延迟执行 - 3秒后执行一次
let timeoutId = window.setTimeout(() => {
console.log("这段代码在3秒后执行");
}, 3000);

// 取消延迟执行
clearTimeout(timeoutId);

// 定时执行 - 每2秒执行一次
let intervalId = window.setInterval(() => {
console.log("这段代码每2秒执行一次");
}, 2000);

// 5次重复后停止定时执行
setTimeout(() => {
clearInterval(intervalId);
console.log("定时执行已停止");
}, 2000 * 5);

4. window.scrollTo() 和 window.scrollBy()

用于控制页面滚动。

javascript
// 滚动到特定位置
window.scrollTo(0, 500); // 滚动到距顶部500像素的位置

// 相对当前位置滚动
window.scrollBy(0, 200); // 向下滚动200像素

实际应用案例

案例1: 响应式网页设计

使用Window对象的属性检测窗口大小变化,实现响应式设计。

javascript
function adjustLayout() {
if (window.innerWidth < 768) {
document.body.classList.add("mobile-layout");
document.body.classList.remove("desktop-layout");
} else {
document.body.classList.add("desktop-layout");
document.body.classList.remove("mobile-layout");
}
console.log(`当前窗口宽度: ${window.innerWidth}px`);
}

// 页面加载时调整布局
adjustLayout();

// 当窗口大小改变时调整布局
window.addEventListener("resize", adjustLayout);

案例2: 滚动到顶部按钮

创建一个滚动到顶部的按钮,当页面向下滚动一定距离时显示。

javascript
// HTML: <button id="scrollToTop" style="display: none;">回到顶部</button>

const scrollToTopBtn = document.getElementById("scrollToTop");

// 监听滚动事件
window.addEventListener("scroll", () => {
if (window.scrollY > 300) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}
});

// 点击按钮滚动到顶部
scrollToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth" // 平滑滚动
});
});

案例3: 用户活动检测

检测用户是否长时间未活动,并显示提醒。

javascript
let inactivityTime = 0;
const inactivityLimit = 30; // 30秒后显示提醒
let inactivityTimer;

function resetTimer() {
clearTimeout(inactivityTimer);
inactivityTime = 0;

inactivityTimer = setTimeout(() => {
alert("你还在吗?长时间未检测到活动。");
}, inactivityLimit * 1000);
}

// 重置计时器的事件
window.addEventListener("mousemove", resetTimer);
window.addEventListener("keypress", resetTimer);
window.addEventListener("click", resetTimer);

// 初始化计时器
resetTimer();

浏览器窗口状态和事件

窗口加载事件

javascript
// 当DOM完全加载后执行
window.addEventListener("DOMContentLoaded", () => {
console.log("DOM已完全加载!");
});

// 当页面及所有资源加载完成后执行
window.addEventListener("load", () => {
console.log("页面已完全加载!");
});

// 当用户尝试离开页面时
window.addEventListener("beforeunload", (event) => {
// 在现代浏览器中,自定义消息不再显示,但需要设置returnValue来触发确认对话框
event.preventDefault();
event.returnValue = "";
});

窗口焦点事件

javascript
// 当窗口获得焦点时
window.addEventListener("focus", () => {
console.log("窗口获得焦点");
document.title = "活跃窗口";
});

// 当窗口失去焦点时
window.addEventListener("blur", () => {
console.log("窗口失去焦点");
document.title = "请回来! 😢";
});

Window对象与iframe

Window对象允许父窗口与iframe之间进行交互。

html
<!-- 父页面 -->
<iframe id="myFrame" src="child.html"></iframe>

<script>
const iframe = document.getElementById('myFrame');

// 等待iframe加载完成
iframe.addEventListener('load', () => {
// 访问iframe的Window对象
const iframeWindow = iframe.contentWindow;

// 调用iframe中的函数
iframeWindow.sayHello();

// 访问iframe中的变量
console.log(iframeWindow.frameData);
});
</script>
html
<!-- child.html -->
<script>
window.frameData = "我是iframe中的数据";

window.sayHello = function() {
alert("Hello from iframe!");
}

// 访问父窗口的Window对象
console.log(window.parent.location.href);
</script>
警告

出于安全考虑,跨域的iframe之间的交互受到同源策略的限制。如果父页面和iframe来自不同域,许多交互将被阻止。

总结

Window对象是JavaScript中最基本也是最重要的对象之一,它提供了:

  1. 对浏览器窗口的控制能力
  2. 全局变量和函数的容器
  3. 与用户交互的方法
  4. 定时器功能
  5. 存储机制
  6. 访问其他BOM对象的入口点

掌握Window对象及其属性和方法,是成为熟练的前端开发者的基础,也是创建交互式web应用的关键。

练习

  1. 创建一个页面,当用户调整浏览器窗口大小时,显示当前窗口的宽度和高度。
  2. 实现一个简单的时钟,使用setInterval()每秒更新一次时间。
  3. 创建一个表单,使用localStorage保存用户输入,即使页面刷新也能恢复之前的输入。
  4. 实现一个"返回顶部"按钮,当页面滚动超过300像素时显示,点击后平滑滚动回页面顶部。
  5. 设计一个网页,当用户将鼠标移出浏览器窗口时,显示一个提示,尝试挽留用户。

附加资源

通过深入学习Window对象,你将能够创建更加动态和交互式的网页,提升用户体验!