JavaScript Window对象

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

Window对象介绍

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

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

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

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

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

备注

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

Window对象的常用属性

1. window.document

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

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

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

2. window.location

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

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

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

3. window.innerHeight 和 window.innerWidth

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

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

4. window.localStorage 和 window.sessionStorage

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

// 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()

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

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

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

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

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

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

// 打开新窗口
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()

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

// 延迟执行 - 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()

用于控制页面滚动。

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

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

实际应用案例

案例1: 响应式网页设计

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

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: 滚动到顶部按钮

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

// 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: 用户活动检测

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

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();

浏览器窗口状态和事件

窗口加载事件

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

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

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

窗口焦点事件

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

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

Window对象与iframe

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

<!-- 父页面 -->
<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>

<!-- 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. 设计一个网页，当用户将鼠标移出浏览器窗口时，显示一个提示，尝试挽留用户。

附加资源

• MDN Web Docs: Window
• W3Schools: JavaScript Window
• JavaScript.info: Browser window

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