编辑“︁JavaScript Window对象”︁

= JavaScript Window对象 =

== 简介 ==
'''Window对象'''是浏览器对象模型（BOM）的核心，代表浏览器窗口或框架。它是JavaScript在浏览器环境中的全局对象，所有全局变量和函数都自动成为Window对象的属性和方法。Window对象提供了与浏览器窗口交互的接口，包括控制窗口尺寸、导航、定时器、对话框等功能。

== 属性 ==
Window对象包含许多有用的属性，以下是一些关键属性：

* '''window.innerWidth''' 和 '''window.innerHeight'''：返回窗口的视口宽度和高度（不包括工具栏和滚动条）。
* '''window.outerWidth''' 和 '''window.outerHeight'''：返回整个浏览器窗口的宽度和高度。
* '''window.location'''：获取或设置当前页面的URL。
* '''window.document'''：指向当前窗口加载的Document对象（DOM）。
* '''window.screen'''：提供有关用户屏幕的信息。
* '''window.history'''：允许操作浏览器会话历史。

=== 示例：获取窗口尺寸 ===
<syntaxhighlight lang="javascript">
// 获取视口尺寸
console.log(`视口宽度: ${window.innerWidth}px`);
console.log(`视口高度: ${window.innerHeight}px`);

// 获取整个窗口尺寸
console.log(`窗口总宽度: ${window.outerWidth}px`);
console.log(`窗口总高度: ${window.outerHeight}px`);
</syntaxhighlight>

输出示例（取决于浏览器窗口大小）：
<pre>
视口宽度: 1366px
视口高度: 657px
窗口总宽度: 1382px
窗口总高度: 744px
</pre>

== 方法 ==
Window对象提供了多种方法来控制浏览器窗口：

=== 窗口操作 ===
* '''window.open()'''：打开新窗口
* '''window.close()'''：关闭当前窗口
* '''window.moveTo()''' 和 '''window.moveBy()'''：移动窗口
* '''window.resizeTo()''' 和 '''window.resizeBy()'''：调整窗口大小

=== 对话框 ===
* '''window.alert()'''：显示警告对话框
* '''window.confirm()'''：显示确认对话框
* '''window.prompt()'''：显示提示输入对话框

=== 定时器 ===
* '''window.setTimeout()''' 和 '''window.clearTimeout()'''
* '''window.setInterval()''' 和 '''window.clearInterval()'''

=== 示例：窗口操作 ===
<syntaxhighlight lang="javascript">
// 打开新窗口
const newWindow = window.open('', '_blank', 'width=400,height=300');

// 2秒后调整新窗口
setTimeout(() => {
    if (newWindow && !newWindow.closed) {
        newWindow.resizeTo(600, 400);
        newWindow.moveTo(100, 100);
    }
}, 2000);
</syntaxhighlight>

== 事件 ==
Window对象支持多种事件，常用的包括：

* '''load'''：当页面完全加载后触发
* '''resize'''：当窗口大小改变时触发
* '''scroll'''：当窗口滚动时触发
* '''beforeunload'''：在窗口即将关闭前触发

=== 示例：窗口事件 ===
<syntaxhighlight lang="javascript">
// 窗口大小改变事件
window.addEventListener('resize', () => {
    console.log(`窗口大小已改变: ${window.innerWidth}x${window.innerHeight}`);
});

// 页面加载完成事件
window.addEventListener('load', () => {
    console.log('页面已完全加载');
});

// 防止意外关闭
window.addEventListener('beforeunload', (e) => {
    e.preventDefault();
    e.returnValue = '您有未保存的更改，确定要离开吗？';
});
</syntaxhighlight>

== 实际应用案例 ==

=== 案例1：响应式布局调整 ===
根据窗口大小动态调整页面布局：
<syntaxhighlight lang="javascript">
function adjustLayout() {
    if (window.innerWidth < 768) {
        // 移动端布局
        document.body.classList.add('mobile-layout');
    } else {
        // 桌面端布局
        document.body.classList.remove('mobile-layout');
    }
}

// 初始调用
adjustLayout();

// 窗口大小改变时调用
window.addEventListener('resize', adjustLayout);
</syntaxhighlight>

=== 案例2：页面加载进度指示 ===
使用Window事件显示加载进度：
<syntaxhighlight lang="javascript">
window.addEventListener('DOMContentLoaded', () => {
    // 主要内容已加载
    document.getElementById('loader').style.display = 'none';
    document.getElementById('content').style.display = 'block';
});

window.addEventListener('load', () => {
    // 所有资源(包括图片)已加载
    console.log('页面完全加载完成');
});
</syntaxhighlight>

== Window对象与其他BOM对象的关系 ==
<mermaid>
graph TD
    Window --> Document
    Window --> History
    Window --> Location
    Window --> Navigator
    Window --> Screen
</mermaid>

== 数学计算示例 ==
在窗口动画中可能需要数学计算，例如平滑滚动：
<math>
scrollPosition = start + (end - start) \times ease(t)
</math>

其中<math>ease(t)</math>是缓动函数，<math>t</math>是时间因子(0到1之间)。

== 注意事项 ==
* 某些Window方法可能被浏览器弹出窗口阻止程序阻止
* 移动设备上的窗口操作可能有特殊限制
* 跨域窗口操作受到严格限制

== 总结 ==
Window对象是JavaScript与浏览器交互的主要接口，提供了丰富的功能来控制浏览器窗口、处理事件、管理定时器等。理解Window对象对于开发交互式网页应用至关重要。通过合理使用Window对象的方法和事件，可以创建响应迅速、用户友好的网页应用。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]