当前位置：首页 > news >正文

BOM常见操作方法汇总

news 2025/3/10 15:14:48

BOM（Browser Object Model，浏览器对象模型）提供了与浏览器窗口交互的方法和属性。BOM 包括了许多对象，如 window、location、history、navigator 等，这些对象提供了与浏览器窗口相关的各种功能。

以下是一些常见的 BOM 操作：

1. `window` 对象

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

1.1 获取窗口尺寸

window.innerWidth 和 window.innerHeight：获取窗口的内部宽度和高度（不包括滚动条等）。
```
console.log(window.innerWidth, window.innerHeight);
```
screen.width 和 screen.height：获取屏幕的宽度和高度。
```
console.log(screen.width, screen.height);
```

1.2 设置窗口大小

window.resizeBy(width, height)：调整窗口大小。
```
window.resizeBy(200, 100);
```
window.resizeTo(width, height)：将窗口大小设置为指定的宽度和高度。
```
window.resizeTo(800, 600);
```

1.3 移动窗口

window.moveTo(xpos, ypos)：移动窗口到指定的位置。
```
window.moveTo(100, 100);
```
window.moveBy(xpos, ypos)：相对于当前位置移动窗口。
```
window.moveBy(50, 50);
```

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); // 前进一步

3.2 添加历史记录

history.pushState(stateObj, title, url)：向历史记录中添加一个新的记录。
```
history.pushState({ page: 2 }, 'Page 2', '/page2.html');
```

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);
```

6. `open` 和 `close` 方法

6.1 打开新窗口

window.open(url, target, features)：打开一个新的浏览器窗口。

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

6.2 关闭窗口

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

示例

下面是一个综合示例，演示了如何使用 BOM 的一些常见操作：

// 获取窗口尺寸
console.log(window.innerWidth, window.innerHeight);// 设置窗口大小
window.resizeTo(800, 600);// 获取当前页面 URL
console.log(location.href);// 导航到新的 URL
location.href = 'https://example.com';// 获取屏幕尺寸
console.log(screen.width, screen.height);// 获取浏览器信息
console.log(navigator.userAgent);// 打开新窗口
window.open('https://example.com', '_blank', 'width=800,height=600');// 关闭当前窗口
// window.close(); // 注释掉这一行，以免关闭当前窗口// 监听窗口大小变化
window.addEventListener('resize', () => {console.log('窗口大小改变：', window.innerWidth, window.innerHeight);
});