前端必刷系列之红宝书——第 12 章

"红宝书" 通常指的是《JavaScript 高级程序设计》，这是一本由 Nicholas C. Zakas（尼古拉斯·扎卡斯）编写的 JavaScript 书籍，是一本广受欢迎的经典之作。这本书是一部翔实的工具书，满满的都是 JavaScript 知识和实用技术。

不管你有没有刷过红宝书，如果现在还没掌握好，那就一起来刷红宝书吧，go！go！go！

系列文章：

第一部分：基本知识（重点、反复阅读）

第二部分：进阶内容（重点、反复阅读）

第三部分：BOM 和 DOM （着重学习）

前端必刷系列之红宝书------第 12 章

第 12 章 BOM

window 对象

BOM 的核心是 window 对象。

window 对象是浏览器环境中的全局对象，它包含了全局作用域中定义的所有变量和函数。
在浏览器中，window 对象也是 global 对象的引用。
window 对象提供了访问和操作浏览器窗口的接口，称为 BOM。
BOM 提供了一系列属性和方法，例如 window.location、window.navigator、window.document 等，用于操作浏览器的窗口、导航和文档。
在浏览器中，全局作用域中声明的变量和函数都会成为 window 对象的属性和方法。
全局变量可以通过 window 对象直接访问，例如 window.myVariable。
window 对象提供了一些用于弹窗和对话框的方法，如 alert()、confirm()、prompt() 等。
window 对象提供了定时器函数，如 setTimeout() 和 setInterval()，用于在一定时间后执行函数或定时重复执行函数。
window 对象还提供了其他一些功能，如打开新窗口或标签页的 window.open() 方法，关闭当前窗口的 window.close() 方法等。

窗口关系

顶层窗口是窗口层次结构中的最顶层窗口，不包含在任何其他窗口中。可以通过 window.top 属性来引用顶层窗口。
当一个窗口包含另一个窗口时，被包含的窗口被认为是父窗口。可以通过 window.parent 属性来引用包含它的窗口。
window.self 属性指向当前窗口自身。这通常用于与 window 对象进行比较，以确定代码是否在期望的窗口中执行。

窗口位置

js 复制代码

window.screenLeft // 窗口相对于屏幕左侧的位置
window.screenTop // 窗口相对于屏幕顶部的位置

window.moveTo(x, y) // 将窗口移动到指定位置
window.moveBy(x, y) // 按指定的像素调整窗口大小

像素比

像素比（Pixel Ratio）是一个用于处理高分辨率屏幕的概念，通常表示一个逻辑像素（在CSS中使用的像素）对应于多少个物理像素。这个比率可以帮助开发者在高分辨率屏幕上提供更清晰的图像和文本。

在 Web 开发中，像素比主要通过 window.devicePixelRatio 属性来获取。这个属性返回一个数字，表示一个逻辑像素对应的物理像素的比率。通常，这个值为 1，表示一对一的映射。在高分辨率屏幕（例如 Retina 屏幕）上，这个值可能大于 1。

css 复制代码

img {
  width: 100px;
  height: 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  img {
    width: 200px;
    height: 200px;
  }
}

窗口大小

在浏览器环境中，可以使用 window.innerWidth 和 window.innerHeight 属性来获取浏览器窗口的内部宽度和高度，即视口的宽度和高度（不包括浏览器工具栏和滚动条）。

js 复制代码

window.innerWidth;  // 浏览器窗口中页面视口的宽度（不包含边框和工具栏）
window.innerHeight; // 浏览器窗口中页面视口的高度（不包含边框和工具栏）

window.outerWidth // 浏览器窗口自身的宽度
window.outerHeight // 浏览器窗口自身的高度

document.documentElement.clientWidth // 页面视口的宽度
document.documentElement.clientHeight // 页面视口的高度

浏览器窗口自身的精确尺寸不好确定，但可以确定页面视口的大小：

js 复制代码

let pageWidth = window.innerWidth
let pageHeight = window.innerHeight

if(typeof pageWidth != 'number'){
    // 检查页面是否是标准模式
    if(document.compatMode == 'CSS1Compat'){
        pageWidth = document.documentElement.clientWidth
        pageHeight = document.documentElement.clientHeight
    }else{
        pageWidth = document.body.clientWidth
        pageHeight = document.body.clientHeight
    }
}

js 复制代码

window.resizeTo() // 接收新的宽度和高度值
window.resizeBy() // 接收宽度和高度各要缩放多少

window.resizeTo(100, 100) // 缩放到 100 * 100

window.resizeBy(100， 50) // 缩放到 200 * 50

window.resizeTo(300, 300) // 缩放到 300 * 300

视口位置

js 复制代码

window.pageXoffset/window.scrollX
window.pageYoffset/window.scrollY

// 相当于当前视口向下滚动 100 像素
window.scrollBy(0, 100)
// 相当于当前视口向右滚动 40 像素
window.scrollBy(40, 0)

// 滚动到页面左上角
window.scrollTo(0, 0)

window.scroll()

// 将窗口滚动到左侧偏移量为 200，顶部偏移量为 300 的位置
window.scrollTo({
  top: 300,
  left: 200,
  behavior: 'smooth' // 可选，表示滚动的行为，可以是 'auto'、'smooth' 等
});

导航与打开新窗口

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。

window.open() 方法可以接受四个参数：

URL（字符串） ：要加载的 URL 地址。可以是绝对或相对路径，也可以是其他网址。
目标窗口（字符串） ：新窗口的名称，如果已经存在具有相同名称的窗口，则会在该窗口中加载新的URL。
窗口特性（字符串） ：包含各种特性的字符串，如窗口的大小、位置、菜单栏、工具栏等。这是一个可选参数。
是否替换（布尔值） ：如果设置为 true，新打开的窗口将替换浏览器历史记录中的当前页面。如果设置为 false（默认值），则在浏览器历史中添加一个新的条目。

js 复制代码

// 打开一个新窗口，指定窗口的大小和位置
let wroxWin = window.open('https://www.example.com', '_blank', 'width=600,height=400,top=100,left=100,fullscreen=yes');

wroxWin.resizeTo(500, 500) // 缩放
wroxWin.moveTo(100, 100) // 移动

// 只能用于 window.open() 创建的弹出窗口
wroxWin.close()

// 新创建窗口的 window 对象有一个属性 opener，指向打开它的窗口。
wroxWin.opener === window // true

// 表示新打开的标签页不需要与打开它的标签页通信。可以运行在独立的进程中。
// 这个连接一旦切断，就无法恢复了
wroxWin.opener = null

安全方面： 在网页加载过程中调用 window.open() 没有效果，而且还可能导致向用户显示错误。弹窗通常可能在鼠标点击或按下键盘中某个键的情况下才能打开。

js 复制代码

// 判断调用 window.open() 的弹窗是否被屏蔽了
let blocked = false

try{
    let wroxWin = window.open('http://www.wrox.com', '_blank')
    if(wroxWin == null){
        blocked = true
    }
}catch(err){
    blocked = true
}
if(blocked){
    alert('The popup was blocked')
}

定时器

js 复制代码

// 设置超时任务
let timeoutId = setTimeout(()=> alert('hello world'), 1000)

// 取消超时任务
clearTimeout(timeoutId)

// 定时任务，会有误差，谨慎使用
let intervalId = setInterval(()=> alert('hello world'), 1000)
clearInterval(intervalId)

系统对话框

系统对话框的外观由操作系统或者浏览器决定，无法使用 css 设置。

警告框（Alert）： 显示一条消息和一个确定按钮。常用于向用户显示一些信息或警告。

js 复制代码

alert('This is an alert message!');

确认框（Confirm）： 显示一条消息、一个确定按钮和一个取消按钮。用于获取用户的确认或取消选择。

js 复制代码

const result = confirm('Do you want to proceed?');
if (result) {
  // 用户点击了确定按钮
  console.log('User clicked OK.');
} else {
  // 用户点击了取消按钮
  console.log('User clicked Cancel.');
}

提示框（Prompt）： 显示一条消息、一个文本输入框、确定按钮和取消按钮。用于获取用户输入的文本。

js 复制代码

const userInput = prompt('Please enter your name:', 'John Doe');
if (userInput !== null) {
  // 用户点击了确定按钮，并输入了文本
  console.log('User entered: ' + userInput);
} else {
  // 用户点击了取消按钮或直接关闭了对话框
  console.log('User canceled the prompt.');
}

打印框： print() 是 JavaScript 中用于触发浏览器打印操作的方法。当调用 print() 方法时，浏览器会弹出打印对话框，允许用户选择打印设置并执行打印操作。

js 复制代码

// 触发打印操作
window.print();

location 对象

js 复制代码

location.href // 完整的 URL 地址
location.protocol // URL 协议部分（例如 "http:"）
location.host // 主机名和端口号（如果有）
location.hostname // 主机名
location.port // 端口号
location.pathname // URL 路径部分和文件名
location.search // URL 查询字符串部分（从问号开始的部分）
location.hash // URL 锚点部分（从井号开始的部分）

查询字符串

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

js 复制代码

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

操作地址

js 复制代码

location.assign("https://www.mozilla.org"); // 或
location = "https://www.mozilla.org"; // 或
location.href = "https://www.mozilla.org";

使用 window.location.replace() 方法可以替换当前页面的 URL，并在浏览历史中不留下记录：

js 复制代码

// 替换当前页面的 URL
window.location.replace('https://www.example.com/new-url');

js 复制代码

location.reload(); // 重新加载，可能从缓存加载
location.reload(true); // 重新加载，从服务器加载

navigator 对象

Navigator 接口表示用户代理的状态和标识。它允许脚本查询它和注册自己进行一些活动。

检测插件

检测浏览器是否安装了某个插件是开发中常见的需求。检测插件就是遍历浏览器中可用的插件，并逐个比较插件的名称。

js 复制代码

// IE10 及更低版本无效
let hasPlugin = function(name){
    name = name.toLowerCase()
    for(let plugin of window.navigator.plugins){
        if(plugin.name.toLowerCase().indexOf(name)>-1){
            return true
        }
    }
    
    return false
}

// 检测 flash
hasPlugin('Flash')

注册处理程序

Navigator 的方法 registerProtocolHandler() 让 web 站点为自身注册用于打开或处理特定 URL 方案（又名协议）的能力。

这通常用于与外部应用程序或协议进行集成，例如电子邮件客户端、在线日历等。举个例子，此 API 允许 Web 邮件站点打开 mailto: URL，或让 VoIP 站点打开 tel: URL。

js 复制代码

// 处理的协议（如'mailto'、'ftp'）
// 处理该协议的 url
// 应用名称
navigator.registerProtocolHandler(scheme, url, title);

screen 对象

screen 对象是浏览器环境中的一个全局对象，表示用户的屏幕。它包含了一些属性，提供了关于用户屏幕的信息，例如屏幕的宽度、高度、像素深度等。

js 复制代码

screen.width; // 屏幕的宽度（以像素为单位）
screen.height; // 屏幕的高度（以像素为单位）
screen.availWidth; // 屏幕的可用宽度，即去除任务栏或其他用户界面元素占用的宽度后的宽度
screen.availHeight; // 屏幕的可用高度，即去除任务栏或其他用户界面元素占用的高度后的高度
screen.colorDepth; // 屏幕的颜色深度，即每个像素的位数
screen.pixelDepth; // 屏幕的颜色深度

history 对象

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

js 复制代码

history.back();

history.forward();

// 向前导航两步
history.go(2);

// 向后导航一步
history.go(-1);


const stateData = { page: 1 };
const pageTitle = 'New Page Title';
const newURL = '/new-url';

// 向浏览器会话历史中添加一个新的状态
history.pushState(stateData, pageTitle, newURL);


const newStateData = { page: 2 };
const newTitle = 'Updated Page Title';
const updatedURL = '/updated-url';

// 用新的状态替换当前的历史记录条目
history.replaceState(newStateData, newTitle, updatedURL);

history.length; // 当前会话历史中的历史记录条目数

未完待续...

参考资料

《JavaScript 高级程序设计》（第 4 版）