JavaScript Window对象
在JavaScript中,Window对象是浏览器对象模型(BOM)的核心。它代表浏览器的窗口,是所有JavaScript全局对象、函数和变量的顶层容器。了解Window对象对于网页交互和动态内容创建至关重要。
Window对象介绍
Window对象是浏览器中的全局对象,它具有双重角色:
- 它是JavaScript代码的全局作用域对象
- 它代表包含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中最基本也是最重要的对象之一,它提供了:
- 对浏览器窗口的控制能力
- 全局变量和函数的容器
- 与用户交互的方法
- 定时器功能
- 存储机制
- 访问其他BOM对象的入口点
掌握Window对象及其属性和方法,是成为熟练的前端开发者的基础,也是创建交互式web应用的关键。
练习
- 创建一个页面,当用户调整浏览器窗口大小时,显示当前窗口的宽度和高度。
- 实现一个简单的时钟,使用
setInterval()
每秒更新一次时间。 - 创建一个表单,使用
localStorage
保存用户输入,即使页面刷新也能恢复之前的输入。 - 实现一个"返回顶部"按钮,当页面滚动超过300像素时显示,点击后平滑滚动回页面顶部。
- 设计一个网页,当用户将鼠标移出浏览器窗口时,显示一个提示,尝试挽留用户。
附加资源
通过深入学习Window对象,你将能够创建更加动态和交互式的网页,提升用户体验!