JavaScript Window 学习笔记

Window 对象

• Window 对象由浏览器创建，代表当前浏览器窗口或者标签页
• 在 JavaScript 中，window 对象是全局对象之一，可以直接使用它的方法和属性

窗口大小相关

• window.innerWidth 和 window.innerHeight: 浏览器窗口不包含浏览器工具栏、滚动条等内容的区域大小
• window.outerWidth 和 window.outerHeight: 整个浏览器窗口大小，包含浏览器工具栏、滚动条等内容

javascriptCopy Code
console.log('内部区域宽度: ' + window.innerWidth);
console.log('外部区域高度: ' + window.outerHeight);

浏览器位置相关

• window.screenX 和 window.screenY: 浏览器相对于屏幕左上角的位置
• window.pageXOffset 和 window.pageYOffset: 浏览器文档在横向和纵向的滚动距离
• window.scrollTo(x, y) 和 window.scrollBy(x, y): 滚动到指定位置或者相对于当前位置滚动一定距离

javascriptCopy Code
console.log('浏览器在屏幕上的 X 坐标: ' + window.screenX);
console.log('页面横向滚动距离: ' + window.pageXOffset);

window.scrollTo(0, 100); // 滚动到纵向距离为 100 的位置
window.scrollBy(0, 50); // 纵向滚动距离增加 50

Navigator 对象

• navigator 对象包含关于浏览器本身的信息
• 可以使用 navigator.userAgent 获取完整的用户代理字符串

浏览器版本信息

• navigator.appCodeName: 浏览器的内部名称
• navigator.appName: 浏览器的名称
• navigator.appVersion: 浏览器的版本信息

javascriptCopy Code
console.log('浏览器内部名称: ' + navigator.appCodeName);
console.log('浏览器名称: ' + navigator.appName);
console.log('浏览器版本信息: ' + navigator.appVersion);

插件相关信息

• navigator.plugins.length: 浏览器安装的插件数量
• navigator.plugins[i].name: 第 i 个插件的名称
• navigator.plugins[i].filename: 第 i 个插件的文件名

javascriptCopy Code
console.log('插件数量: ' + navigator.plugins.length);
for (let i = 0; i < navigator.plugins.length; i++) {
  console.log('插件名称: ' + navigator.plugins[i].name);
  console.log('插件文件名: ' + navigator.plugins[i].filename);
}

用户代理字符串

• navigator.userAgent: 浏览器发送给服务器的用户代理字符串
• 用户代理字符串通常包含浏览器的名称、版本、操作系统信息等

javascriptCopy Code
console.log('用户代理字符串: ' + navigator.userAgent);

以上是 JavaScript Window 学习笔记的部分内容，如果还有需要深入学习的地方，可以根据具体需求查阅 MDN 文档。