JavaScript学习 BOM操作

Browser Object Model (BOM) 是一套专为与浏览器交互而设计的API，它允许JavaScript访问和操纵浏览器窗口以及浏览器本身的相关特性。以下是对BOM主要对象及其操作的详细讲解：

1. Window对象

Window对象 是BOM的核心，它代表浏览器窗口，并且是JavaScript全局对象。这意味着所有全局变量和函数都是Window对象的属性或方法。

• 实例操作：

  // 访问当前URL
  console.log(window.location.href); 
  
  // 设置定时器，2秒后执行函数
  setTimeout(function() {
      alert('Hello from the timer!');
  }, 2000);
  
  // 监听窗口关闭事件
  window.onbeforeunload = function() {
      return 'Are you sure you want to leave?';
  };
  
  // 新开一个窗口
  window.open('https://example.com', '_blank');
  
  // 触发页面刷新
  window.location.reload();

2. Location对象

Location对象 用于获取和修改当前窗口的URL。

• 实例操作：

  // 获取当前URL
  console.log(location.href);
  
  // 重定向到新的URL
  location.href = 'https://www.example.com';
  7// 获取URL的路径部分
  console.log(location.pathname);
  
  // 获取查询字符串参数
  var params = new URLSearchParams(location.search);
  console.log(params.get('paramKey'));

3. History对象

History对象 提供了访问和操作浏览器历史记录的功能。

• 实例操作：
  Javascript

  // 后退一页
  history.back();
  
  // 前进一页
  history.forward();
  
  // 使用HTML5 History API添加历史记录条目
  history.pushState({page: 'details'}, 'Details Page', '/details.html');

4. Navigator对象

Navigator对象 包含有关浏览器的信息，如名称、版本、语言偏好等，还可以用来检测浏览器特性。

• 实例操作：

  // 获取浏览器信息
  console.log(navigator.userAgent); // 浏览器信息字符串
  console.log(navigator.language); // 浏览器首选语言
  
  // 检查地理定位功能的支持情况
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
          console.log(position.coords.latitude, position.coords.longitude);
      });
  } else {
      console.log('Geolocation is not supported by your browser.');
  }

5. Screen对象

Screen对象 提供了访问客户端显示器信息的方法，如屏幕分辨率、可用工作区大小等。

• 实例操作：

  // 获取屏幕分辨率
  console.log(screen.width); // 屏幕宽度
  console.log(screen.height); // 屏幕高度
  
  // 获取可用工作区大小（扣除操作系统任务栏等）
  console.log(screen.availWidth);
  console.log(screen.availHeight);

以上五个对象共同构成了BOM的基本功能集，让JavaScript可以更好地与浏览器环境互动。在实际编程中，这些对象常用于网页交互、动态路由、用户地理位置获取、屏幕适配等各种应用场景。