BOM常见操作方法汇总

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。

BOM（Browser Object Model，浏览器对象模型）浏览器对象模型，提供了与浏览器窗口交互的方法和属性。BOM 包括了许多对象，如 window、 location、 history、 navigator、 screen等，这些对象提供了与浏览器窗口相关的各种功能，如：后退、前进、刷新、窗口变化、滚动条滚动…

1.window对象

window 对象是最顶层的对象，几乎所有的 BOM 操作都与其相关。

1.1 获取窗口尺寸

获取窗口的内部宽度和高度（不包括滚动条等）

console.log(window.innerWidth, window.innerHeight);

获取屏幕的宽度和高度

console.log(screen.width, screen.height);

1.2 设置窗口大小

把当前窗口调整多少像素大小

resizeBy(width, height)： 相对窗口当前的大小，宽度调整width个像素，高度调整height个像素。如果参数为负值，将缩小窗口，反之扩大窗口。

window.resizeBy(200, 100);

将窗口大小设置为指定的宽度和高度

window.resizeTo(width, height)：将窗口大小设置为指定的宽度和高度。

window.resizeTo(800, 600);

1.3 移动窗口

移动窗口到指定的位置。

window.moveTo(x, y)：移动窗口左上角到相对于屏幕左上角的(x,y)点。

window.moveTo(100, 100);

相对于当前位置移动窗口

window.moveBy(x, y)：从当前位置水平移动窗口x个像素，垂直移动窗口y个像素，x为负数，将向左移动窗口，y为负数，将向上移动窗口。

window.moveBy(50, 50);

将滚动条移动XY个像素

window.scrollBy(x, y)：如果有滚动条，将横向滚动条向左移动x个像素，将纵向滚动条向下移动y个像素。

window.scrollBy(50, 50);

将滚动条移动到相对于窗口的XY的位置

window.scrollTo(x, y)：如果有滚动条，将横向滚动条移动到相对于窗口宽度为x个像素的位置，将纵向滚动条移动到相对于窗口高度为y个像素的位置。

window.scrollTo(50, 50);

1.4 打开和关闭窗口

window.open(url, target, features)：可以导航到一个特定的url，也可以打开一个新的浏览器窗口。如果传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数url。

window.open('https://example.com', '_blank', 'width=800,height=600');

window.close()：关闭当前窗口。

window.close();

window.open() 会返回新窗口的引用，也就是新窗口的window对象。新创建的window对象有一个opener属性，该属性指向打开它的原始窗口。

// 打开一个新的窗口
const myWin = window.open('https://example.com', '_blank', 'width=800,height=600');

// 假设你想在5秒后关闭新打开的窗口 在IE中生效 Chrome不能关闭新打开的窗口
setTimeout(() => {
    myWin.close();
}, 5000);  // 5000毫秒（即5秒）后执行关闭操作

2. location 对象

location 对象提供了与当前页面 URL 相关的方法和属性。

2.1 获取和设置 URL

location.href：获取当前页面的完整 URL。

console.log(location.href);

设置 URL：导航到新的 URL。

location.href = 'https://example.com';

2.2 重定向

location.replace(url)：替换当前页面的历史记录，并导航到新的 URL。

location.replace('https://example.com');

location.reload()：重新加载当前页面。

location.reload();
location.reload(true); // 默认false，传true强制刷新当前页面

2.3 获取 URL 组件

location.protocol*：获取协议部分。

console.log(location.protocol); // 输出: "http:"

location.host：获取主机部分（包括端口号）。

console.log(location.host); // 输出: "www.example.com:80"

location.hostname：获取主机名部分。

console.log(location.hostname); // 输出: "www.example.com"

location.port：获取端口号。

console.log(location.port); // 输出: "80"

location.pathname：获取路径部分。

console.log(location.pathname); // 输出: "/path/to/page.html"

location.search：获取查询字符串部分。

console.log(location.search); // 输出: "?query=value"

location.hash：获取锚点部分。

console.log(location.hash); // 输出: "#section"

3. history 对象

history 对象提供了与浏览器历史记录相关的方法。

3.1 前进和后退

history.back()：返回上一个页面。

history.back();

history.forward()：前进到下一个页面。

history.forward();

history.go(steps)：前进或后退指定的步骤数。

history.go(-1); // 后退一步
history.go(1); // 前进一步

4. navigator 对象

navigator 对象提供了关于浏览器的信息。

4.1 获取浏览器信息

navigator.userAgent：获取浏览器的用户代理字符串。

console.log(navigator.userAgent);

navigator.platform：获取操作系统平台信息。

console.log(navigator.platform);

5. screen 对象

screen 对象提供了关于屏幕的信息。

5.1 获取屏幕尺寸

screen.width 和 screen.height：获取屏幕的宽度和高度。

console.log(screen.width, screen.height);

写在最后

掌握这些基础知识，对日后的前端开发工作非常重要，看十遍不如练一遍，快快动手练起来吧！