JavaScript基礎（11）BOM

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");
        };
    };