Java教程

JavaScript笔记 07:BOM对象

本文主要是介绍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);
};

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

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

这篇关于JavaScript笔记 07:BOM对象的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!