BOM常见操作方法汇总

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

通过这些示例，你可以了解如何使用 BOM 来获取和设置浏览器窗口的各种属性和状态，从而更好地控制页面的行为。