一文梳理BOM - 技术栈

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

BOM 概述

BOM 比 DOM 更大，它包含 DOM。

Window 对象： Window 对象是 BOM 的核心，表示浏览器窗口，包含许多方法和属性，如 alert()、document、location 等。

Document 对象： Document 对象表示当前加载的 HTML 文档，是 DOM 的一部分，通过 window.document 或 document 访问。
Location 对象： Location 对象表示当前加载文档的 URL 信息，通过 window.location 或 document.location 访问。
Screen 对象： Screen 对象表示用户的屏幕，提供关于屏幕大小和颜色深度等信息，通过 window.screen 访问。
History 对象： History 对象保存用户在浏览器窗口中访问的 URL 记录，通过 window.history 访问，允许在用户访问历史中导航。
Navigator 对象： Navigator 对象包含有关浏览器的信息，如浏览器的名称、版本、操作系统等，通过 window.navigator 访问。

window对象

在ECMAScript中，window对象扮演着Global对象的角色，也就是说，所有在全局作用域声明的变量，函数都会变成window的属性和方法，都可以通过 window.属性名（或方法名） 直接调用

以下几点需要注意

使用 window.attr 声明的变量和 var 声明的变量有个区别，使用 var 声明的变量，不能使用 delete 删除，使用 window. 声明的变量可以被删除
在JavaScript中，尝试使用未声明的变量会抛出错误，但是通过 window 对象查询未声明的变量，只会返回 undefined

导航和打开窗口

通过 window.open() 既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口

该函数接收四个参数：

URL

窗口目标

一个新窗口的特性字符串，例：'height=400,width=400,top=10,left=10,resizable=yes'

布尔值，是否取代当前页面（仅在不打开新窗口的时候有效）

如果 window.open() 传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数指定的URL

js 复制代码

// 如果存在topFrame窗口，则在topFrame窗口打开指定url,否则新创建一个窗口并命名为topFrame

window.open('htttp://www.maxiaofei.com','topFrame')
==> <a href="http://www.maxiaofei.com" target="topFrame"></a>

window.open() 会返回新窗口的引用，也就是新窗口的 window 对象

js 复制代码

var myWin = window.open('http://www.maxiaofei.com','myWin')

window.close() 仅用于通过 window.open() 打开的窗口

新创建的 window 对象有一个 opener 属性，该属性指向打开他的原始窗口对象

间歇调用和超时调用

JavaScript 是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。超时调用需要使用 window 对象的 setTimeout() 方法，它接受两个参数：要执行的代码和以毫秒表示的时间（即在执行代码前需要等待多少毫秒）。

javascript 复制代码

复制代码//设置超时调用
var timeoutId = setTimeout(function() {
    alert("Hello world!");
}, 1000);

//注意：把它取消
clearTimeout(timeoutId);

系统对话框

浏览器通过 alert() 、 confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。

Location 对象

Location 对象是浏览器对象模型（BOM）中的一个核心对象，用于提供有关当前浏览器窗口 URL 的信息以及对浏览器地址栏进行操作的方法。通过 window.location 或简写为 location，开发者可以获取和修改当前页面的 URL 相关部分，从而实现页面导航、刷新等操作。Location 对象包含一系列属性和方法，用于处理 URL 的不同部分，如协议、主机、路径、查询参数等。这使得开发者可以灵活地管理浏览器地址，实现页面跳转、参数传递等功能。在 Web 开发中，Location 对象是处理浏览器导航和地址相关逻辑的重要工具。

Location 对象属性

属性	描述
hash	设置或返回 URL 的锚部分 (#)。
host	设置或返回 URL 的主机名和端口号。
hostname	设置或返回 URL 的主机名。
href	设置或返回整个 URL。
origin	返回 URL 的协议、主机名和端口号。
pathname	设置或返回 URL 的路径名。
port	设置或返回 URL 的端口号。
protocol	设置或返回 URL 的协议。
search	设置或返回 URL 的查询字符串部分。

Location 对象方法

方法	描述
assign()	加载新文档。
reload()	重新加载当前文档。
replace()	用新文档替换当前文档。

`assign()`

用法

location.assign(url) 方法用于将浏览器导航到指定的 URL。通过调用这个方法，可以动态地改变浏览器窗口或标签的当前 URL，实现页面导航的效果。

注意

相对路径和绝对路径： 参数 url 可以是相对路径、绝对路径，或者完整的 URL。相对路径将相对于当前页面的 URL 进行解析。
历史记录： 使用 assign() 方法导航到新 URL 时，会替换当前的历史记录条目，因此用户不能通过点击浏览器的 "后退" 按钮返回到前一个页面。

原理

调用 location.assign(url) 方法会导致浏览器加载指定 URL 的文档，效果类似于用户手动输入或点击一个链接。
如果传递的 url 参数是相对路径，它将相对于当前页面的 URL 进行解析。
如果传递的 url 参数是绝对路径或完整 URL，浏览器将加载指定的文档，替换当前的浏览历史记录条目。

使用场景

动态导航： 当需要通过 JavaScript 动态地改变页面的 URL 以实现导航效果时，assign() 方法是一个常用的工具。
响应用户操作： 例如，当用户点击某个按钮时，可以使用 assign() 方法将页面导航到另一个页面。

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>assign() Method Example</title>
</head>
<body>
    <button onclick="navigateToNewPage()">Navigate to New Page</button>

    <script>
        function navigateToNewPage() {
            // 使用 assign() 方法导航到新的 URL
            location.assign("https://www.example.com/new-page");
        }
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，调用 navigateToNewPage() 函数，该函数内部使用 location.assign() 方法将页面导航到新的 URL（www.example.com/new-page）。这... JavaScript 实现了页面导航，而不需要用户手动输入或点击链接。

`reload()`

location.reload() 方法是 Location 对象提供的用于重新加载当前页面的方法。通过调用 reload() 方法，可以刷新页面，重新加载当前文档。该方法可以不带参数调用，也可以传递一个布尔值作为参数，用于控制是否从服务器强制重新加载。

无参数调用：****

javascript 复制代码

location.reload();

效果： 重新加载当前页面，通常会使用浏览器缓存来加载。

带参数调用

javascript 复制代码

location.reload(true);

参数： 如果传递 true，则强制从服务器重新加载，而不使用缓存。
效果： 重新加载当前页面，这次会忽略浏览器缓存，从服务器获取最新的内容。

注意事项

reload() 方法默认会尝试使用缓存加载页面，因此可能不会获取最新的服务器内容。
强制从服务器重新加载时，可能会导致页面加载时间延长，因为必须从服务器获取所有资源。

使用场景

重新加载页面： 在某些交互或事件发生后，需要刷新页面以获取最新的数据或应用更改。
强制从服务器获取最新内容： 当页面内容可能在服务器上发生变化时，通过传递 true 参数来确保获取最新内容。

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reload() Method Example</title>
</head>
<body>
    <button onclick="reloadPage()">Reload Page</button>
    <button onclick="forceReloadPage()">Force Reload Page</button>

    <script>
        function reloadPage() {
            // 重新加载当前页面（使用缓存）
            location.reload();
        }

        function forceReloadPage() {
            // 强制从服务器重新加载当前页面（忽略缓存）
            location.reload(true);
        }
    </script>
</body>
</html>

在这个示例中，通过两个按钮分别调用 reloadPage() 和 forceReloadPage() 函数，演示了使用 reload() 方法重新加载页面的不同方式。

`replace()`

location.replace() 方法是 Location 对象提供的用于替换当前页面的方法。通过调用 replace() 方法，可以导航到一个新的 URL，并替换当前的浏览历史记录条目，从而使用户无法通过浏览器的 "后退" 按钮返回到前一个页面。

使用方法

javascript 复制代码

location.replace(newURL);

newURL： 要导航到的新 URL，可以是相对路径、绝对路径或完整的 URL。

效果

调用 replace(newURL) 方法会导致浏览器加载指定 URL 的文档，替换当前的浏览历史记录条目。
用户不能通过浏览器的 "后退" 按钮返回到前一个页面，因为前一个页面的历史记录已经被替换。

注意事项

由于替换了当前的历史记录条目，因此用户不能通过浏览器的 "后退" 按钮返回到前一个页面。

使用场景

重定向页面： 当需要将用户导航到新的页面，同时又不希望保留当前页面的历史记录时，可以使用 replace() 方法。

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>replace() Method Example</title>
</head>
<body>
    <button onclick="redirectToNewPage()">Redirect to New Page</button>

    <script>
        function redirectToNewPage() {
            // 使用 replace() 方法导航到新的 URL，并替换当前历史记录条目
            location.replace("https://www.example.com/new-page");
        }
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，调用 redirectToNewPage() 函数，该函数内部使用 location.replace() 方法将页面导航到新的 URL（www.example.com/new-page）。由... replace() 方法，用户不能通过浏览器的 "后退" 按钮返回到前一个页面。

Navigator对象

Navigator 对象是浏览器环境中的一个核心对象，提供了有关浏览器和用户设备的信息。通过 window.navigator 可以访问这个对象。Navigator 对象包含了一系列属性和方法，用于检测和获取有关浏览器、操作系统和用户环境的信息。

appCodeName	返回浏览器代码名称。
appName	返回浏览器名称。
appVersion	返回浏览器版本。
cookieEnabled	如果启用了浏览器 cookie，则返回 true。
geolocation	返回用户位置的 geolocation 对象。
language	返回浏览器语言。
onLine	如果浏览器在线，则返回 true。
platform	返回浏览器平台。
product	返回浏览器引擎名称。
userAgent	返回浏览器用户代理标头。

Screen 对象

每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求

History 对象

History 对象属性和方法

属性/方法	描述
back()	加载历史列表中的上一个 URL（页面）。
forward()	加载历史列表中的下一个 URL（页面）。
go()	从历史列表中加载特定的 URL（页面）。
length	返回历史列表中的 URL（页面）数量。

Storage 对象

Storage 对象属性和方法

属性/方法	描述
key(n)	返回存储中第 n 个键的名称。
length	返回存储在 Storage 对象中的数据项的数量。
getItem(keyname)	返回指定键名的值。
setItem(keyname , value)	将键添加到存储中，或更新键的值（若已存在）。
removeItem(keyname	从存储中删除键。
clear()	清空存储中的所有键。

Web Storage API 相关页面

属性	描述
window.localStorage	允许将键/值对保存在Web浏览器中。存储没有到期日期的数据。
window.sessionStorage	允许将键/值对保存在 Web 浏览器中。为会话存储数据。