深入理解 Window 对象：属性与方法详解
在前端开发中，Window 对象是一个非常重要的全局对象，它代表了浏览器中的一个窗口或标签页。通过 Window 对象，开发者可以控制浏览器窗口的行为、访问文档内容、操作浏览器的历史记录等。本文将详细介绍 Window 对象的属性和方法，帮助开发者更好地理解和运用它。
1. Window 对象属性
1.1 closed
- 描述: 返回一个布尔值，表示窗口是否已被关闭。
- 示例:
if (window.closed) { console.log("窗口已关闭"); } else { console.log("窗口未关闭"); }
1.2 defaultStatus
- 描述: 设置或返回窗口状态栏中的默认文本。
- 注意: 该属性在现代浏览器中已不再支持。
1.3 document
- 描述: 对
Document对象的只读引用，表示窗口中加载的文档。 - 示例:
console.log(window.document.title); // 输出当前文档的标题
1.4 frames
- 描述: 返回窗口中所有命名的框架。该集合是
Window对象的数组，每个Window对象在窗口中含有一个框架。 - 示例:
console.log(window.frames.length); // 输出窗口中框架的数量
1.5 history
- 描述: 对
History对象的只读引用，用于操作浏览器的历史记录。 - 示例:
window.history.back(); // 返回上一页
1.6 innerHeight 和 innerWidth
- 描述: 分别返回窗口的文档显示区的高度和宽度。
- 示例:
console.log(window.innerHeight); // 输出窗口内部高度 console.log(window.innerWidth); // 输出窗口内部宽度
1.7 localStorage
- 描述: 在浏览器中存储 key/value 对，且没有过期时间。
- 示例:
window.localStorage.setItem("name", "John"); console.log(window.localStorage.getItem("name")); // 输出 "John"
1.8 length
- 描述: 设置或返回窗口中的框架数量。
- 示例:
console.log(window.length); // 输出窗口中框架的数量
1.9 location
- 描述: 用于窗口或框架的
Location对象，包含当前 URL 的信息。 - 示例:
console.log(window.location.href); // 输出当前页面的 URL
1.10 name
- 描述: 设置或返回窗口的名称。
- 示例:
window.name = "myWindow"; console.log(window.name); // 输出 "myWindow"
1.11 navigator
- 描述: 对
Navigator对象的只读引用，包含有关浏览器的信息。 - 示例:
console.log(window.navigator.userAgent); // 输出浏览器的用户代理字符串
1.12 opener
- 描述: 返回对创建此窗口的窗口的引用。
- 示例:
console.log(window.opener); // 输出打开当前窗口的窗口对象
1.13 outerHeight 和 outerWidth
- 描述: 分别返回窗口的外部高度和宽度，包含工具条与滚动条。
- 示例:
console.log(window.outerHeight); // 输出窗口外部高度 console.log(window.outerWidth); // 输出窗口外部宽度
1.14 pageXOffset 和 pageYOffset
- 描述: 分别设置或返回当前页面相对于窗口显示区左上角的 X 和 Y 位置。
- 示例:
console.log(window.pageXOffset); // 输出页面水平滚动距离 console.log(window.pageYOffset); // 输出页面垂直滚动距离
1.15 parent
- 描述: 返回父窗口。
- 示例:
console.log(window.parent); // 输出父窗口对象
1.16 screen
- 描述: 对
Screen对象的只读引用，包含有关显示屏幕的信息。 - 示例:
console.log(window.screen.width); // 输出屏幕的宽度
1.17 screenLeft 和 screenTop
- 描述: 分别返回相对于屏幕窗口的 X 和 Y 坐标。
- 示例:
console.log(window.screenLeft); // 输出窗口相对于屏幕的 X 坐标 console.log(window.screenTop); // 输出窗口相对于屏幕的 Y 坐标
1.18 sessionStorage
- 描述: 在浏览器中存储 key/value 对，关闭窗口或标签页后数据将被删除。
- 示例:
window.sessionStorage.setItem("name", "Jane"); console.log(window.sessionStorage.getItem("name")); // 输出 "Jane"
1.19 self
- 描述: 返回对当前窗口的引用，等价于
Window属性。 - 示例:
console.log(window.self === window); // 输出 true
1.20 status
- 描述: 设置窗口状态栏的文本。
- 注意: 该属性在现代浏览器中已不再支持。
1.21 top
- 描述: 返回最顶层的父窗口。
- 示例:
console.log(window.top); // 输出最顶层的父窗口对象
2. Window 对象方法
2.1 alert()
- 描述: 显示带有一段消息和一个确认按钮的警告框。
- 示例:
window.alert("这是一个警告框");
2.2 atob() 和 btoa()
- 描述:
atob()解码一个 base-64 编码的字符串，btoa()创建一个 base-64 编码的字符串。 - 示例:
let encoded = window.btoa("Hello World"); console.log(encoded); // 输出 "SGVsbG8gV29ybGQ=" let decoded = window.atob(encoded); console.log(decoded); // 输出 "Hello World"
2.3 blur()
- 描述: 把键盘焦点从顶层窗口移开。
- 示例:
window.blur();
2.4 clearInterval() 和 clearTimeout()
- 描述: 分别取消由
setInterval()和setTimeout()设置的定时器。 - 示例:
let intervalId = setInterval(() => console.log("Hello"), 1000); clearInterval(intervalId);
2.5 close()
- 描述: 关闭浏览器窗口。
- 示例:
window.close();
2.6 confirm()
- 描述: 显示带有一段消息以及确认按钮和取消按钮的对话框。
- 示例:
let result = window.confirm("你确定要删除吗？"); console.log(result); // 输出 true 或 false
2.7 createPopup()
- 描述: 创建一个弹出窗口。
- 注意: 该方法在现代浏览器中已不再支持。
2.8 focus()
- 描述: 把键盘焦点给予一个窗口。
- 示例:
window.focus();
2.9 getSelection()
- 描述: 返回一个
Selection对象，表示用户选择的文本范围或光标的当前位置。 - 示例:
let selection = window.getSelection(); console.log(selection.toString()); // 输出用户选择的文本
2.10 getComputedStyle()
- 描述: 获取指定元素的 CSS 样式。
- 示例:
let element = document.getElementById("myElement"); let styles = window.getComputedStyle(element); console.log(styles.color); // 输出元素的颜色样式
2.11 matchMedia()
- 描述: 检查 media query 语句，返回一个
MediaQueryList对象。 - 示例:
let mediaQuery = window.matchMedia("(max-width: 600px)"); console.log(mediaQuery.matches); // 输出 true 或 false
2.12 moveBy() 和 moveTo()
- 描述:
moveBy()相对窗口的当前坐标移动指定的像素，moveTo()把窗口的左上角移动到一个指定的坐标。 - 示例:
window.moveBy(100, 100); // 窗口向右下方移动 100px window.moveTo(0, 0); // 窗口移动到屏幕左上角
2.13 open()
- 描述: 打开一个新的浏览器窗口或查找一个已命名的窗口。
- 示例:
let newWindow = window.open("https://www.example.com", "_blank");
2.14 print()
- 描述: 打印当前窗口的内容。
- 示例:
window.print();
2.15 prompt()
- 描述: 显示可提示用户输入的对话框。
- 示例:
let name = window.prompt("请输入你的名字", "John"); console.log(name); // 输出用户输入的内容
2.16 resizeBy() 和 resizeTo()
- 描述:
resizeBy()按照指定的像素调整窗口的大小，resizeTo()把窗口的大小调整到指定的宽度和高度。 - 示例:
window.resizeBy(100, 100); // 窗口宽度和高度各增加 100px window.resizeTo(800, 600); // 窗口大小调整为 800x600
2.17 scroll(), scrollBy(), 和 scrollTo()
- 描述:
scroll()已废弃，推荐使用scrollTo()。scrollBy()按照指定的像素值来滚动内容，scrollTo()把内容滚动到指定的坐标。 - 示例:
window.scrollBy(0, 100); // 向下滚动 100px window.scrollTo(0, 0); // 滚动到页面顶部
2.18 setInterval() 和 setTimeout()
- 描述:
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式，setTimeout()在指定的毫秒数后调用函数或计算表达式。 - 示例:
let intervalId = setInterval(() => console.log("Hello"), 1000); setTimeout(() => clearInterval(intervalId), 5000); // 5 秒后停止
2.19 stop()
- 描述: 停止页面载入。
- 示例:
window.stop();
2.20 postMessage()
- 描述: 安全地实现跨源通信。
- 示例:
假设你有一个页面 https://www.example.com，并且你想从另一个页面（例如 https://www.anotherexample.com）向它发送消息。
发送消息的页面 (https://www.anotherexample.com)
// 获取目标窗口的引用
var targetWindow = window.open("https://www.example.com");
// 发送消息
targetWindow.postMessage("Hello", "https://www.example.com");
接收消息的页面 (https://www.example.com)
// 监听 message 事件
window.addEventListener("message", function(event) {
// 检查消息的来源
if (event.origin !== "https://www.anotherexample.com") {
return; // 忽略来自不信任源的消息
}
// 处理接收到的消息
console.log("Received message: " + event.data); // 输出: Received message: Hello
});
3. 总结
Window 对象是前端开发中不可或缺的一部分，它提供了丰富的属性和方法来控制浏览器窗口的行为。通过本文的介绍，相信大家对 Window 对象有了更深入的了解。在实际开发中，合理运用这些属性和方法，可以极大地提升用户体验和开发效率。
如果你对 Window 对象还有其他疑问或想要了解更多细节，欢迎在评论区留言讨论！