BOM

BOM

瀏覽器對象模型

ECMAScript 是 JavaScript 的核心，但若是要在 Web 中使用 JavaScript，那麼 BOM(瀏覽器對象模型)則無疑纔是真正的核心。BOM 提供了不少對象，用於訪問瀏覽器的功能，這些功能與任意網頁內容無關。多年來，缺乏事實上的規範致使 BOM 既有意思又有問題，由於瀏覽器提供商會按照各自的想法隨意去擴展它。因而，瀏覽器之間共有的對象就成爲了事實上的標準。這些對象在瀏覽器中得以存在，很大程度上是因爲它們提供了與瀏覽器的互操做性。W3C 爲了把瀏覽器中 JavaScript 最基本的部分標準化，已經將 BOM 的主要方面歸入了 HTML5 的規範中。

window對象

BOM 的核心對象是 window，它表示瀏覽器的一個實例。在瀏覽器中，window 對象有雙重角色， 它既是經過 JavaScript 訪問瀏覽器窗口的一個接口，又是 ECMAScript 規定的 Global 對象。這意味着 在網頁中定義的任何一個對象、變量和函數，都以 window 做爲其 Global 對象，所以有權訪問 parseInt()等方法。

系統對話框

警告框

警告框常常用於確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

語法：

window.alert('警告!!!警告!!!');

確認框

確認框用於使用戶能夠驗證或者接受某些信息。

當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。

若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

語法:

var a = window.confirm('肯定登錄');

提示框

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

語法：

var name = window.prompt('你的姓名是?','xxx');

定時任務

在ECMAScript語法中爲window對象提供了兩個很是有用的定時任務的方法:setTimeout()和setInterval()方法

setTimeout

setTimeout()方法表示一次性定時任務作某件事情,它接收兩個參數,第一個參數爲執行的函數,第二個參數爲時間(毫秒計時:1000毫秒==1秒)

window.setTimeout(function(){    console.log('asd');},0)console.log('123');

會發現,先打印了123,再打印了asd,由於第二個參數是一個表示等待多長時間的毫秒數，但通過該時間後指定的代碼不必定會執行。 JavaScript 是一個單線程序的解釋器，所以必定時間內只能執行一段代碼。爲了控制要執行的代碼，就 有一個 JavaScript 任務隊列。這些任務會按照將它們添加到隊列的順序執行。setTimeout()的第二個 參數告訴 JavaScript 再過多長時間把當前任務添加到隊列中。若是隊列是空的，那麼添加的代碼會當即 執行;若是隊列不是空的，那麼它就要等前面的代碼執行完了之後再執行。

setlnterval()

setInterval()方法表示週期性循環的定時任務.它接收的參數跟setTimeout()方法同樣。

每隔1秒讓num數值+1,當num數值大於5時,中止更新

例:

var num = 0;
var timer = null;
timer = setInterval(function(){
    num++;
    if (num > 5) {
        clearInterval(timer);
        return;
    }
    console.log('num:'+ num);
},1000);

咱們可使用clearInterval()來清除當前的定時任務

location對象

location是最有用的BOM對象之一,它提供了與當前窗口中加載的文檔有關的信息，還提供了一 些導航功能。事實上，location 對象是很特別的一個對象，由於它既是 window 對象的屬性，也是document 對象的屬性;

換句話說，window.location 和document.location 引用的是同一個對象。 location 對象的用處不僅表如今它保存着當前文檔的信息，還表如今它將 URL 解析爲獨立的片斷，讓 開發人員能夠經過不一樣的屬性訪問這些片斷。

屬性名	例子	說明
hash	#content」	返回URL中的hash(#),若是沒有,則返回空字符串
host	「www.baidu.com:80」	返回服務器名稱和端口號
hostname	「www.baidu.com」	返回不帶端口號的服務器名稱
href	「https://www.baidu.com「	返回當前加載頁面的完成URL
pathname	‘’/web/「	返回url中的目錄和文件名
port	‘80’	返回url中指定的端口號,若是url中不包含端口號,則這個屬性返回空字符串
seach	「?name=zhangsan」	返回url的查詢字符串,這個字符串以問號開頭
protocol	「https:」	返回頁面使用的協議.一般是http:或https:

查詢字符串參數

雖然經過上面的屬性能夠訪問到 location 對象的大多數信息，但其中訪問 URL 包含的查詢字符 串的屬性並不方便。儘管 location.search 返回從問號到 URL 末尾的全部內容，但卻沒有辦法逐個 訪問其中的每一個查詢字符串參數。爲此，能夠像下面這樣建立一個函數，用以解析查詢字符串，而後返回包含全部參數的一個對象:

function getQueryStringArgs() {
    // ?username=mjj&pwd=18
    // 1.取得查詢字符串並去掉開頭的問號
    var qs = location.search.length > 0 ? location.search.substring(1) : "";
    // 保存數據的對象
    var args = {};
    // 2.取得每一項
    var items = qs.length ? qs.split('&'):  [];
    var item = null,name =  null,value = null;
    // 3.逐個將每一項添加到args對象中
    for(var i = 0; i < items.length; i++){
        item = items[i].split('=');
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length) {
            args[name]  = value;
        }
    }
    return args;
}
//假設地址查詢參數爲?name=zhangsan&age=18
//另外還要考慮?,=,&編碼的狀況
var args = getQueryStringArgs();
console.log(args);//{name: "zhangsan", age: "18"}

位置操做

href屬性

使用location對象能夠經過不少方式來改變瀏覽器的位置.首先,也是最經常使用的方式經過href屬性將其傳遞一個url

2秒後跳轉到百度的web界面

例:

setTimeout(function(){
    location.href = 'https://www.baidu.com';
},2000)

當經過上述任何方式修改 URL 以後，瀏覽器的歷史記錄中就會生成一條新記錄，所以用戶通 過單擊「後退」按鈕都會導航到前一個頁面。要禁用這種行爲，可使用 replace()方法。這個方法 只接受一個參數，即要導航到的 URL;結果雖然會致使瀏覽器位置改變，但不會在歷史記錄中生成新記 錄。在調用 replace()方法以後，用戶不能回到前一個頁面。

2秒以後跳轉網頁但不會產生歷史記錄

例:

setTimeout(function(){
    location.replace('https://www.baidu.com');
},2000)

reload()方法

它的做用是從新加載當前顯示的頁面,若是調用 reload() 時不傳遞任何參數，頁面就會以最有效的方式從新加載。也就是說，若是頁面自上次請求以來並無改 變過，頁面就會從瀏覽器緩存中從新加載。若是要強制從服務器從新加載，則須要像下面這樣爲該方法 傳遞參數 true。

location.reload();//從新加載(有可能從緩存中加載)
location.reload(true);//從新加載(強制從服務器加載)

navigatir對象

最先由 Netscape Navigator 2.0 引入的 navigator 對象，如今已經成爲識別客戶端瀏覽器的事實標準 ,每一個瀏覽器中的 navigator 對象也都有一套本身的屬性

//此方法只適應非IE瀏覽器
function hasPlugin(name){
    console.log(navigator.plugins);
    var   name = name.toLowerCase();
    for (var i=0; i < navigator.plugins.length; i++){
        if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){ return true;
                                                                       } }
    return false;
}
//檢測 Flash 
alert(hasPlugin("Flash"));
alert(hasPlugin("Native Client"));

history對象

history 對象保存着用戶上網的歷史記錄,使用 go()方法能夠在用戶的歷史記錄中任意跳轉，能夠向後也能夠向前。這個方法接受一個參數， 表示向後或向前跳轉的頁面數的一個整數值。負數表示向後跳轉(相似於單擊瀏覽器的「後退」按鈕),正數表示向前跳轉(相似於單擊瀏覽器的「前進」按鈕)。 看例子:

//後退一頁 history.go(-1);
//前進一頁 history.go(1);
//前進兩頁 history.go(2);