JS Browser BOM

在 JavaScript 中，浏览器对象模型（BOM）是描述浏览器功能和对象的术语，并不是一个官方标准。

BOM 提供了与浏览器交互的对象，让开发者可以控制浏览器显示页面之外的部分。

主要 BOM 组件包括：

1. Window 对象：它是 BOM 的核心，代表了浏览器的一个窗口或框架，并充当了全局对象的角色，它包含了诸如 document 的属性，同时也提供了很多控制浏览器窗口的方法和属性。

2. Document 对象：虽然 document 对象是 DOM 的一部分，但是它也可以被看作是 BOM 的一部分，因为 window.document 属性引用到了包含在窗口中的网页。

3. Location 对象：表示当前窗口的 URL，并提供方法与之进行交云，如重新加载相同的资源或导航到新的页面。

4. History 对象：提供了浏览历史的操作方法，例如 history.back() 和 history.forward()，对用户的导航历史进行前进或后退的操作。

5. Navigator 对象：包含了有关浏览器本身的信息，如版本和已安装的插件，也可以用来检测用户的浏览器类型。

6. Screen 对象：包含用户屏幕的信息，诸如分辨率等。

7. Alert, Confirm, 和 Prompt 对话框：允许显示简单的对话框进行用户通讯。

BOM 提供的其他功能：

• 计时器功能：通过 setTimeout 和 setInterval 可以设置在一定时间间隔后执行一段代码或重复执行代码。
• Cookies：可以通过 document.cookie 属性来访问和控制页面的 cookies。
• XMLHttpRequest 对象：用于与服务器进行异步交云。

BOM Window

Window 对象是 BOM 的核心，代表一个浏览器窗口或一个窗格(frame)。
它执行多种功能和提供对浏览器的控制，包含 ducument 等属性，如下是相等的。

window.document.getElementById("header");
document.getElementById("header");

Window 对象其他属性：

• 窗口尺寸：innerWidth 和 innerHeight 属性可以获取窗口的视口大小。
• 滚动：scrollBy() 和 scrollTo() 方法允许在窗口中滚动内容。
• 窗口管理：open()、close()、moveTo() 和 resizeTo() 用于创建、关闭、移动和调整窗口大小。

// 获取窗口的视口尺寸
console.log(`窗口宽度: ${window.innerWidth}, 窗口高度: ${window.innerHeight}`);
 
// 滚动窗口
window.scrollBy(0, 100); // 向下滚动100像素
window.scrollTo(0, 0); // 滚动到页面顶部
 
// 打开一个新窗口
let newWin = window.open("https://www.example.com");
// 关闭新打开的窗口
newWin.close();
// 移动窗口
newWin.moveTo(500, 300);
// 调整窗口大小
newWin.resizeTo(600, 400);

BOM Location

Location 对象包含关于当前 URL 的信息，以及加载新页面的方法。你可以通过 window.location 来访问它。以下是一些常用功能：

• window.location.href returns the href (URL) of the current page
• window.location.hostname returns the domain name of the web host
• window.location.pathname returns the path and filename of the current page
• window.location.protocol returns the web protocol used (http: or https:)
• window.location.search URL 中问号（?）后面的字符串。
• window.location.assign() loads a new document
• window.location.reload() reload the current page

// 打印当前页面的URL
console.log(window.location.href);
// 重新加载当前页面
window.location.reload();
// 加载新的页面
window.location.assign("https://www.example.com");
// 改变URL的hash
window.location.hash = "section2";
// 搜索字符串查询参数
console.log(window.location.search);

BOM History

History对象提供了用户浏览历史的接口。通过window.history来访问。常用方法为：

• back()：与浏览器后退按钮相同。
• forward()：与浏览器前进按钮相同。
• go()：可以通过参数指定前进或后退几个页面。

// 后退到历史记录的前一个页面
window.history.back();
// 前进到历史记录的下一个页面
window.history.forward();
// 前进两个页面
window.history.go(2);
// 后退两个页面
window.history.go(-2);

BOM Navigator

Navigator对象提供有关浏览器的信息，可通过window.navigator来访问。它包含了以下属性：

• appName和appVersion：分别提供浏览器名和版本信息。
• userAgent：返回代表用户代理信息的字符串。
• platform：返回浏览器平台（操作系统）信息。
• language：返回当前浏览器的语言。
• cookieEnabled

// 获取浏览器名称和版本
console.log(`浏览器名称: ${navigator.appName}`);
console.log(`浏览器版本: ${navigator.appVersion}`);
// 检测用户代理字符串
console.log(`用户代理: ${navigator.userAgent}`);
// 获取操作系统平台
console.log(`平台: ${navigator.platform}`);
// 获取浏览器语言
console.log(`浏览器语言: ${navigator.language}`);

BOM Screen

Screen对象包含用户屏幕的信息，通过window.screen来访问。一些有用的属性包括：

• width和height：屏幕的宽度和高度（以像素计）。
• availWidth和availHeight：可用的屏幕宽度和高度，排除了任务栏之类的界面元素。

// 屏幕宽度和高度
console.log(`屏幕宽度: ${screen.width}, 屏幕高度: ${screen.height}`);
// 可用的屏幕宽度和高度
console.log(
  `可用屏幕宽度: ${screen.availWidth}, 可用屏幕高度: ${screen.availHeight}`
);

BOM Popup Boxes

BOM 还提供了一些用于与用户交互的对话框函数，如：

• alert()：显示一个带有消息和确认按钮的警告框。
• confirm()：显示一个带有消息和确认/取消按钮的对话框，当用户点击确认返回true，否则返回false。
• prompt()：显示一个带有消息，输入框和确认/取消按钮的对话框，用户输入的文本会被返回，如果用户点击取消或关闭对话框，返回 null。

// 显示警告框
alert("这是一个警告框！");
// 显示确认对话框，并处理用户点击的结果
if (confirm("确定进行这个操作吗？")) {
  console.log("用户点击了确定");
} else {
  console.log("用户点击了取消");
}
// 显示提示对话框，并获取用户的输入
let userResponse = prompt("请输入您的名字:", "默认名字");
console.log(userResponse); // 如果用户点击取消，则 userResponse 为 null

BOM Timing Events

计时器功能：setTimeout()、clearTimeout()、setInterval() 和 clearInterval() 用于执行延时和周期性任务。

// 设置计时器
let timerId = setTimeout(() => alert("3 秒过去了！"), 3000);
// 清除计时器
clearTimeout(timerId);
// 设置计时器 (repeat execute)
let timerId = setInterval(() => alert("3 秒过去了！"), 3000);
// 清除计时器
clearInterval(timerId);

BOM Cookies

在浏览器对象模型（BOM）中，cookies 是存储在用户浏览器中的小段文本数据。它们通常用于记住用户信息和偏好设置，如登录状态、用户偏好、购物车内容等。JavaScript 允许你通过 document.cookie 属性来创建、读取、修改和删除 cookies。

创建和修改 Cookies
创建和修改 cookies 非常简单，可以通过给 document.cookie 赋值来实现。cookie 字符串由键值对组成，键与值用等号（=）连接。此外，还可以通过一些可选属性来定义 cookie 的行为，如 expires、max-age、path、domain 和 secure。

// 创建一个简单的 cookie，名为 "user"，值为 "John Doe"
document.cookie = "user=John Doe";
// 添加过期时间（Expires），格式为 UTC/GMT 时间字符串
document.cookie = "user=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC";
// 使用 max-age 设置 cookie 的生存时间（以秒为单位）
document.cookie = "user=John Doe; max-age=3600"; // 1小时后过期
// 设置 cookie 的路径
document.cookie = "user=John Doe; path=/";
// 设置 cookie 的域
document.cookie = "user=John Doe; domain=example.com";
// 通过 secure 标记确保 cookie 仅通过 HTTPS 传输
document.cookie = "user=John Doe; secure";

读取 Cookies：通过字符串处理方法来分离出每个 cookie 的值。

// 获取并打印所有的 cookie
console.log(document.cookie);
 
// 解析 cookies，找到特定的 cookie 值
function getCookie(name) {
  let cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split("=");
    if (parts[0] === name) {
      return parts[1];
    }
  }
  return "";
}
 
// 使用函数来获取名为 "user" 的 cookie 值
let userName = getCookie("user");
console.log(userName);

删除 Cookies：实际上是将它的过期时间设置为一个过去的时间点，这样浏览器会自动清除它。

// 删除一个 cookie
document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Cookies 有一些限制，比如大小限制（通常最大为 4KB）以及同源策略的限制。并且现代的 Web 开发更倾向于使用 Web 存储（Web Storage）机制比如 localStorage 和 sessionStorage，这些机制提供了更直观的 API、更大的存储容量和更好的安全性。不过，cookies 依然是处理跨会话存储的有效工具，尤其是在需要服务器读取客户端存储信息时。

一个简单的 BOM 示例

// 打印当前窗口的URL
console.log(window.location.href);
 
// 导航到新URL
window.location.href = "https://www.example.com";
 
// 打开一个新的浏览器窗口
window.open("https://www.example.com");
 
// 显示一个警告框
alert("Hello, World!");
 
// 设置一个计时器，在3秒后执行一个函数
setTimeout(function () {
  alert("3 seconds have passed!");
}, 3000);

BOM 的各种功能非常有用，特别是在需要与用户的环境交互时。这些功能经常被用于创建动态的 Web 应用程序，让浏览上网的体验更加丰富和互动。