BOM
浏览器对象模型
BOM能够使咱们通过JS来操作浏览器
在BOM中为咱们提供了一组对象,用来实现对浏览器的操作
BOM对象
Window
代表的是整个浏览器的窗口,同时window也是网页中的全局对象
Navigator
代表的以后浏览器的信息,通过该对象能够来辨认不同的浏览器
Location
代表以后浏览器的地址栏信息,通过Location能够获取地址栏信息,或者操作浏览器跳转页面
History
代表浏览器的历史记录,能够通过该对象来操作浏览器的历史记录
因为隐衷起因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
而且该操作只在当次访问时无效
Screen
代表用户的屏幕的信息,通过该对象能够获取到用户的显示器的相干的信息
这些BOM对象在浏览器中都是作为window对象的属性保留的,
能够通过window对象来应用,也能够间接应用
//console.log(navigator);//console.log(location);//console.log(history);
Navigator
代表的以后浏览器的信息,通过该对象能够来辨认不同的浏览器
因为历史起因,Navigator对象中的大部分属性都曾经不能帮忙咱们辨认浏览器了
个别咱们只会应用userAgent来判断浏览器的信息,
userAgent
是一个字符串,这个字符串中蕴含有用来形容浏览器信息的内容,
不同的浏览器会有不同的userAgent
火狐的userAgent
* Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0 *
Chrome的userAgent
* Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 *
IE8
* Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) *
IE9
* Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) *
IE10
* Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) *
IE11
* Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
在IE11中曾经将微软和IE相干的标识都曾经去除了,所以咱们根本曾经不能通过UserAgent来辨认一个浏览器是否是IE了
//alert(navigator.appName); var ua = navigator.userAgent; console.log(ua); 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("你是IE11,枪毙了你~~~"); }
如果通过UserAgent不能判断,还能够通过一些浏览器中特有的对象,来判断浏览器的信息
比方:
ActiveXObject if("ActiveXObject" in window){ alert("你是IE,我曾经抓住你了~~~"); }else{ alert("你不是IE~~~"); } /*alert("ActiveXObject" in window);*/
History
对象能够用来操作浏览器向前或向后翻页
window.onload = function(){
获取按钮对象
var btn = document.getElementById("btn");btn.onclick = function(){length
属性,能够获取到当成拜访的链接数量
alert(history.length);back()
能够用来回退到上一个页面,作用和浏览器的回退按钮一样
history.back();forward()
能够跳转下一个页面,作用和浏览器的后退按钮一样
history.forward(); go()
能够用来跳转到指定的页面
它须要一个整数作为参数
1:示意向前跳转一个页面 相当于forward()
2:示意向前跳转两个页面
-1:示意向后跳转一个页面
-2:示意向后跳转两个页面
history.go(-2);
Location
该对象中封装了浏览器的地址栏的信息
window.onload = function(){获取按钮对象 var btn = document.getElementById("btn"); btn.onclick = function(){
如果间接打印location,则能够获取到地址栏的信息(以后页面的残缺门路)
alert(location);
如果间接将location属性批改为一个残缺的门路,或相对路径
则咱们页面会主动跳转到该门路,并且会生成相应的历史记录
location = "http://www.baidu.com"; location = "01.BOM.html";assign()
用来跳转到其余的页面,作用和间接批改location一样
reload()
用于从新加载以后页面,作用和刷新按钮一样
如果在办法中传递一个true,作为参数,则会强制清空缓存刷新页面
location.reload(true);replace()
能够应用一个新的页面替换以后页面,调用结束也会跳转页面
不会生成历史记录,不能应用回退按钮回退
location.replace("01.BOM.html"); }; };