BOM指的是浏览器对象模型,它提供了一组对象,用来完成对浏览器的操作
BOM对象在浏览器中都是作为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); };
代表当前浏览器的信息,通过该对象可以识别不同的浏览器
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,可算找到你了!"); } };
代表当前浏览器的历史记录,通过该对象可以操作浏览器的历史记录。由于隐私的原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,且该操作只在当此访问时有效
// 可以用来操作浏览器向前或向后翻页 var history = window.history; // 可以获取到当次访问的链接的数量 console.log(history.length); // 回退到上一个页面,作用和浏览器的回退按钮一样 history.back(); // 可以跳转到下一个页面,作用和浏览器的前进按钮一样 history.forward(); // 可以用来跳转到指定的页面,参数为整数(1表示向前跳转一个页面,-2表示向后跳转两个页面) history.go();
代表当前浏览器地址栏的信息,通过该对象可以获取地址栏信息,或者操作浏览器跳转页面
<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"); }; };
代表用户的屏幕信息,通过该对象可以获取到用户显示器的相关信息