1. 什么是BOM?
DOM就是一套操作HTML标签的API(接口/方法/属性) BOM就是一套操作浏览器的API(接口/方法/属性)，BOM的核心是window
2. BOM中常见的对象
window: 代表整个浏览器窗口
注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局)
Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
Screen: 代表用户的屏幕信息
注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
Navigator
Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器 console.log(window.navigator);
var agent = window.navigator.userAgent; if(/chrome/i.test(agent)){ alert("当前是谷歌浏览器"); }else if(/firefox/i.test(agent)){ alert("当前是火狐浏览器"); }else if(/msie/i.test(agent)){ alert("当前是低级IE浏览器"); }else if("ActiveXObject" in window){ alert("当前是高级IE浏览器"); }
Location
Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
console.log（window.location.href); window.location.href="[www.baidu.com](www.baidu.com)";//设置href地址 window.location.reload();//重新加载 window.location.reload(true);//强制刷新
什么是强制刷新?
浏览器重新从服务器请求资源,在http请求头中不会包含缓存标记。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>51-JavaScript-Location</title> </head> <body> <button id="btn1">获取</button> <button id="btn2">设置</button> <button id="btn3">刷新</button> <button id="btn4">强制刷新</button> <script> let oBtn1 = document.querySelector("#btn1"); let oBtn2 = document.querySelector("#btn2"); let oBtn3 = document.querySelector("#btn3"); let oBtn4 = document.querySelector("#btn4"); // 获取当前地址栏的地址 oBtn1.onclick = function(){ console.log(window.location.href); } // 设置当前地址栏的地址 oBtn2.onclick = function(){ window.location.href = "http://www.it666.com"; } // 重新加载界面 oBtn3.onclick = function(){ window.location.reload(); } oBtn4.onclick = function(){ window.location.reload(true); } </script> </body> </html>
History
History: 代表浏览器的历史信息, 通过History来实现刷新/前进/后退 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录 注意点: 只有当前访问过其它的界面, 才能通过forward/go方法前进 如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面,传递0代表刷新，-1即为后退
window.history.forward() window.history.back() window.history.go() window.history.go(n)
