JavaScript笔记 07：BOM对象

BOM指的是浏览器对象模型，它提供了一组对象，用来完成对浏览器的操作

BOM对象在浏览器中都是作为window对象的属性保存的

1. window

代表整个浏览器的窗口，同时也是网页中的全局对象

定时器的使用

<h1 id="count">1</h1>

window.onload = function () {
  var h1 = document.getElementById("count");
  var time = 1;
  // 执行定时任务，返回值作为定时器的唯一标识
  var timer = setInterval(function () {
    h1.innerHTML = ++time;
    if (time == 10) {
      // 关闭定时器，参数为定时器标识
      // 可以接受任意参数，如果参数是一个有效的定时器标识，则停止对应的定时器；如果无效，则不会进行任何操作
      clearInterval(timer);
    }
  }, 1 * 1000);
};

定时器的应用：动画效果

function move(obj, target, step, attr, callback) {
  clearInterval(obj.timer);
  var current = parseInt(getStyle(obj, attr));
  if (current > target) {
    step = -step;
  }
  obj.timer = setInterval(function () {
    var oldValue = parseInt(getStyle(obj, attr));
    var newValue = oldValue + step;
    if ((step < 0 && newValue < target) || (step > 0 && newValue > target)) {
      newValue = target;
    }
    obj.style[attr] = newValue + "px";
    if (newValue == target) {
      clearInterval(obj.timer);
      // 动画执行完毕的回调函数
      callback && callback();
    }
  }, 5);
}
function getStyle(obj, name) {
  if (window.getComputedStyle) {
    return getComputedStyle(obj, null)[name];
  } else {
    return obj.currentStyle[name];
  }
}

2. navigator

代表当前浏览器的信息，通过该对象可以识别不同的浏览器

window.onload = function () {
  var navigator = window.navigator;
  // 由于历史原因，navigator中的大部分属性都已经不能帮助识别浏览器了
  console.log(navigator.appName); // Netscape
  // 一般只会使用userAgent来判断浏览器的信息，不同的浏览器信息不同
  // 在IE11中已经将微软和IE相关的标识都去除了，基本已经不能通过userAgent来判断一个浏览器是否是IE了
  console.log(navigator.userAgent);
  // 可以通过浏览器中特有的对象来判断浏览器的信息
  // 比如：ActiveXObject
  // IE11例外，虽然它也有ActiveXObject，但是在判断转换成布尔值时会转换成false，可以使用属性 in 对象的方式来判断
  console.log(window.ActiveXObject);

  // 判断浏览器的方式
  var agent = navigator.userAgent;
  if (/firefox/i.test(agent)) {
    alert("你是火狐");
  } else if (/chrome/i.test(agent)) {
    alert("你是谷歌");
  } else if (/msie/i.test(agent)) {
    alert("你是IE");
  } else if ("ActiveXObject" in window) {
    alert("你是IE11，可算找到你了！");
  }
};

3. history

代表当前浏览器的历史记录，通过该对象可以操作浏览器的历史记录。由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，且该操作只在当此访问时有效

// 可以用来操作浏览器向前或向后翻页
var history = window.history;
// 可以获取到当次访问的链接的数量
console.log(history.length);
// 回退到上一个页面，作用和浏览器的回退按钮一样
history.back();
// 可以跳转到下一个页面，作用和浏览器的前进按钮一样
history.forward();
// 可以用来跳转到指定的页面，参数为整数（1表示向前跳转一个页面，-2表示向后跳转两个页面）
history.go();

4. location

代表当前浏览器地址栏的信息，通过该对象可以获取地址栏信息，或者操作浏览器跳转页面

<button id="btn01">点击触发功能</button>
<input type="text">

window.onload = function () {
  // 该对象中封装了浏览器中地址栏的信息
  var location = window.location;
  var btn01 = document.getElementById("btn01");
  btn01.onclick = function () {
    console.log(location.href); // http://127.0.0.1:5500/html/dom%E6%9F%A5%E8%AF%A2.html
    // 跳转到指定的页面
    // location.assign("page.html");
    // 重新加载当前文档，和刷新一样（要注意文本框内输入内容的缓存，可以传参数true确保清除缓存数据，不同浏览器行为不一致）
    // location.reload();
    // 使用一个新的页面替换当前页面，但是不保存历史记录
    // location.replace("page.html");
  };
};

5. screen

代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息