浏览器对象模型BOM学习

BOM

• 浏览器对象模型
• BM可以使我们通过JS来操作浏览器
• 在BOM中为我们提供了一组对象,用来完成对浏宽器的操作
• B0M对象
  • Window
    • 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
    • 其他对象都是该对象的属性，其他对象可以直接获取，也可以通过window对象获取
  • Navigator
    • 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
  • Location
    • 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
  • History
    • 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录；
    • 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页。而且干操作只在当次访问时有效
  • Screenl
    • 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息。

Navigator

• 代表的当前器的信息,通过该对象可以来识别不同的览器
• 由于历史原因, Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
• 一般我们只会使用 userAgent家判断浏览器的信息

hbuilder内置浏览器的userAgent信息：
Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36 HBuilderX

火狐浏览器的userAgent信息：
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0

Chrome浏览器的userAgent信息：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

IE11
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Zoom 3.6.0; rv:11.0) like Gecko
在IE11中已经将微软和IE相关的表示都丢掉了，所以不能通过userAgent属性来识别一个浏览器是否是IE了。

IE8
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Zoom 3.6.0)

<script>
    var nav = window.navigator;
    // console.log(nav.userAgent);
    var ua = nav.userAgent;
    if(/Firefox/i.test(ua)){
        alert("你是火狐")
    }else if(/Chrome/i.test(ua)){
        alert("你是Chrome")
    }else if (/MSIE/i.test(ua)){
        alert("你是IE浏览器")
    }else if("ActiveXobject" in window){
        alert("你是IE浏览器，而且是IE11，抓住你了~~~")
    }
</script>

History

属性	说明
length	返回历史列表中的网址数

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

a、back() – forward()

可以用来回退到上一个页面，作用和浏览器的回退按钮一样

<button>按钮</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    var history = window.history;
    btn.onclick = function() {
        // history.back();
        // history.forward()
    }
</script>

b、go()

可以用来跳转到指定的页面；

需要一个整数作为参数

• 1：表示向前跳转一个页面
• 2：表示向前跳转两个页面
• …
• -1：表示向后跳转一个页面
• -2：表示向后跳转两个页面
• …

<button>按钮</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    var history = window.history;
    btn.onclick = function() {
        history.go(4)
    }
</script>

Location

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

查看属性：

var btn = document.getElementsByTagName("button")[0];
var loca = window.location;
btn.onclick = function() {
    console.log(loca.href);
    console.log(loca);
}

---

如果直接将location属性修改为一个完整的路径或相对路径，则页面会自动跳转到该路径，冰球会生成相应的历史记录。

window.location = "https://www.baidu.com/"; 

方法：

a、assign()

用来跳转到其他页面，作用和直接修改locating一样

window.location.assign("https://www.baidu.com/")

b、reload()

用于重新加载当前页面，作用和刷新按钮一样

如果在方法中传递一个true 作为参数，则会强制清空缓存刷新页面。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

window.location.reload(true)

c、replace()

可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，

但是不会生成历史记录，不能使用回退按钮回退页面

window.location.replace("https://www.baidu.com/")

---

---

定时器

定时器方法是window的方法，可以使用window获取到。

方法	描述
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

a、间隔调用

var count=0;
// 该方法会返回一个唯一的定时器标识
// 参数有两个：
// 		1、回调函数
// 		2、调用回调函数的间隔，以毫秒为单位
var timer = setInterval(function(){
    document.write(count++);
},1000)
btu.onclick = function() {
    // clearInterval()方法可以用来关闭一个定时器，但是要传入一个定时器的标识作为参数
    clearInterval(timer);
}

b、超时调用

var btn = document.getElementsByTagName("button")[0];
// 该方法会返回一个唯一的定时器标识
// 参数有两个：
// 		1、回调函数
// 		2、调用回调函数的间隔，以毫秒为单位
// setTimeout()
var timer = setTimeout(function() {
    alert("被调用了");
}, 1000)
btu.onclick = function() {
    // clearTimeout()方法可以用来关闭一个定时器，但是要传入一个定时器的标识作为参数
    clearTimeout(timer);
}