JavaScript之BOM基礎

BOM(Browser Object Model)也叫瀏覽器對象，它提供了很多對象，用於訪問瀏覽器的功能。但是BOM是沒有標準的，每一個瀏覽器廠家會根據自己的需求來擴展BOM對象。本文主要以一些簡單的小例子，簡述前端開發中BOM的相關基礎知識，僅供學習分享使用，如有不足之處，還請指正。

概述

window對象是最頂層的對象，旗下還有6大屬性，也都是對象。document對象下也有5大屬性，同樣都是對象。window的屬性和方法，可以採用：window.屬性，或 window.方法()進行調用，或者直接調用。BOM結構圖，如下所示：

window對話框

window提供的預設對話共三種：系統對話框（alert），選擇對話框（confirm），輸入對話框（prompt），如下所示：

1 //系統對話框
2 alert('Hello world!!!'); //彈出一個對話框，只有一個確定按鈕，沒有返回值。
3 //選擇對話框，有兩個按鈕，確定和取消。本身可以返回bool類型的結果，如果確定，返回true，否則返回false
4 document.writeln( confirm('Are you sure ?'));//點確定，輸出true ；取消，輸出：false
5 //輸入框，需要用戶輸入值，輸入的數據類型不限
6 document.writeln(prompt('Plese input a value:','0'));//點確定：返回輸入的值；點取消，返回null。

打開視窗

通過調用window.open方法，打開新的視窗。open方法共3個參數：1、新視窗的URL 2、視窗名稱或目標 3、設置視窗屬性 。如下所示：

1 window.open('http://www.baidu.com'); //打開新視窗
2 window.open('http://www.baidu.com','baidu');//新打開視窗的名稱，凡是打開相同名稱的視窗，則會原有視窗中重新載入。
3 window.open('http://www.baidu.com','_black');//在新視窗中打開並載入,也是只會打開一個
4 window.open('http://www.baidu.com','_parent');//在本視窗中載入

第三個參數，是視窗的一些特征，如寬，高，坐標，等。用逗號隔開。如下所示：

1 var box=window.open('http://wwww.baidu.com','baidu','width=400,height=400,top=100,left=100,location=yes');
2 document.writeln(box);//輸出：[object Window] 即，open預設返回子視窗的window對象。
3 box.alert('show!!!');//由於跨域，則預設瀏覽器拒絕訪問
4 var box=window.open('index.html','baidu','width=400,height=400,top=100,left=100,location=yes');
5 box.alert('show!!!');//不跨域，則可以訪問
6 window.opener.document.writeln('訪問父視窗');//通過window.opener訪問父視窗

open方法預設返回新視窗的window對象，可以通過返回值來訪問子視窗內容。

視窗的位置

用於獲取和設置視窗的位置（左上角的起始坐標），主要通過screenLeft、screenTop和screenX、screenY來訪問，如下所示：

1 document.writeln(window.screenLeft);//左邊坐標，此屬性firefox不支持
2 document.writeln(window.screenTop);//上邊坐標，此屬性firefox不支持
3 document.writeln(window.screenX);//左邊坐標，此屬性firefox支持,IE9以上也支持
4 document.writeln(window.screenY);//上邊坐標，此屬性firefox支持,IE9以上也支持

以上屬性有的瀏覽器不支持，可以判斷返回值是否是number類型來區分，如下所示：

1 var left=typeof window.screenLeft=='number'?window.screenLeft:window.screenX;
2 var top=typeof window.screenTop=='number'?window.screenTop:window.screenY;
3 document.writeln('left='+left+',top='+top);//輸出：left=0,top=109 

視窗大小

視窗的大小，主要通過innerWidth、innderHeight和outerWidth、outerHeight來設置和獲取。如下所示：

1 document.writeln(window.innerWidth);//,IE9以上也支持 內視窗顯示區大小
2 document.writeln(window.innerHeight);//,IE9以上也支持 內視窗顯示區大小
3 document.writeln(window.outerWidth);//,IE9以上也支持 ，外視窗整體大小，包含工具欄和邊框
4 document.writeln(window.outerHeight);//,IE9以上也支持，外視窗整體大小，包含工具欄和邊框
5 document.writeln(document.documentElement.clientWidth);//獲取document的寬度 和innderWidth效果一樣            
6 document.writeln(document.documentElement.clientHeight);//獲取document的高度 和innderHeight效果一樣        

如何跨瀏覽器獲取視窗大小，可以通過document.compatMode判斷瀏覽器的模式，如下所示：

 1 var width=window.innerWidth;
 2 var height=window.innerHeight;
 3 if(typeof width !='number'){
 4     if(document.compatMode=='CSS1Compat'){
 5         //如果就標準模式
 6         width=document.documentElement.clientWidth;
 7         height=document.documentElement.clientHeight;
 8     }else{
 9         width=document.body.clientWidth;
10         height=document.body.clientHeight
11     }
12 }
13 document.writeln('width='+width+',height='+height);//輸出：width=1366,height=620 

視窗的移動和重置大小

通過moveTo、moveBy和resizeTo、resizeBy來設置視窗的大小和移動位置，如下所示：

1 window.moveTo(100,100);//移動到某個位置，目前都不支持，不起作用
2 window.moveBy(10,10);//每次刷新移動多少位置，目前都不支持，不起作用
3 window.resizeTo(300,300);//調整視窗大小，第一次打開起作用，後面再刷新不起作用
4 window.resizeBy(10,10);//重新設置視窗的大小，目前不起作用

window定時器

window的定時器一共有兩種：1、超時操作（setTimeOut） 2、間歇操作（setTimeInterval）。

超時操作：第一個參數：可以執行的代碼塊字元串，第二個參數：超時時間，單位毫秒。如下所示：

1 //超時操作：第一個參數：可以執行的代碼塊字元串，第二個參數：超時時間，單位毫秒
2 setTimeout('alert("hello js!!!")',2000);
3 //但是不建議上述寫法：不容易擴展，容易出錯。可以採用如下方法：
4 function box(){
5     alert('hello js !!!');
6 }
7 setTimeout(box,2000);

但是上述方法就分開的，不是一個整體，推薦採用如下方式優化：

1 var box= setTimeout(function() {
2     alert('hello js !!!');
3 }, 2000);//推薦寫法：擴展性好，封裝性也好
4 //box表示超時執行的id
5 document.writeln(box);
6 clearTimeout(box);//可以取消超時調用執行計劃

備註：超時操作通過clearTimeout來取消操作，參數為超時操作返回的id。

間歇調用，可以重覆執行,定時執行，如下所示：間隔200毫秒，輸出1到5。

 1 var num=0;
 2 var max=5;
 3 function bb(){
 4     num++;
 5     //document.writeln(num);//不可以用wirteln
 6     document.getElementById('A01').innerText=num;
 7     if(num==max){
 8         clearInterval(box);
 9     }
10 }
11 var box = setInterval(bb,200);

上述例子，也可以通過超時調用，模擬間歇調用，如下所示：

 1 var num=0;
 2 var max=5;
 3 var box=0;
 4 function bb(){
 5     num++;
 6     //document.writeln(num);//不可以用wirteln
 7     document.getElementById('A01').innerText=num;
 8     if(num==max){
 9         clearTimeout(box);
10     }else{
11         box=setTimeout(bb,200);
12     }
13 }
14 box = setTimeout(bb,200);

location對象

javascript中location地址對象描述的是某一個視窗對象所打開的地址。如下所示：

 1 document.writeln(window.location);//返回當前的路徑
 2 document.writeln(document.location);//返回當前的路徑
 3 window.location.hash="#66";//設置錨點，會跳轉到新的頁面，#可以不帶，會預設帶上
 4 document.writeln(window.location.hash);//返迴路徑的錨點，#66
 5 //埠
 6 document.writeln(window.location.port);//返回當前訪問的路徑的埠
 7 window.location.port=8888;//如果設置埠，則會跳轉到對應的埠        
 8 document.writeln(window.location.search);//返迴路徑中？後面的信息，如：?__hbt=1581605601724 
 9 window.location.assign('http://www.baidu.com');//可以實現跳轉到指定的url功能
10 window.location.href='http://www.baidu.com'; //同樣可以跳轉

重新載入，通過reload來實現，如下所示：

1 window.location.reload();//進行重新載入，可能是從緩存中載入
2 window.location.reload(true);//強制從後臺載入
3 window.location.replace('http://www.baidu.com');//在當前頁面替換當前url到新的url並重新載入的方法

history對象

主要用於訪問歷史記錄，如：前進、後退、跳轉等，如下所示：

1 document.writeln(window.history.length);//返回歷史記錄的屬性
2 window.history.back();//往後退
3 window.history.forward();//前進
4 window.history.go(-1);//跳轉到指定的頁數，負數往後退，正數往前進

navigator對象

navigator對象包含訪問者客戶端的相關信息，且navigator對象的實例的唯一的，如下所示：

1 document.writeln(window.navigator.appName);//完整瀏覽器名稱，IE輸出：Netscape ,不能精確的輸出瀏覽器
2 document.writeln(window.navigator.userAgent);
3 //http頭代理名稱，IE輸出：Netscape Mozilla/5.0 (Windows NT 6.1; Win64; x64; Trident/7.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko            
4 document.writeln(window.navigator.platform);//瀏覽器操作系統的平臺，輸出：Win64            
5 //插件列表
6 document.writeln(window.navigator.plugins.length);//插件個數

通過navigator對象輸出瀏覽器的插件信息，如下所示：

1 for(var i=0;i<window.navigator.plugins.length;i++){
2     document.writeln('插件名稱：'+window.navigator.plugins[i].name);
3     document.writeln('插件文件名：'+window.navigator.plugins[i].filename);
4     document.writeln('插件描述：'+window.navigator.plugins[i].description);
5     document.writeln('插件版本'+window.navigator.plugins[i].version);
6     document.writeln('<br />');
7 }

瀏覽器支持的MIME類型，如下所示：

1 document.writeln(window.navigator.mimeTypes.length);//4 
2 for(var i=0;i<window.navigator.mimeTypes.length;i++){
3     document.writeln(' mime名稱：'+window.navigator.mimeTypes[i].type);
4     document.writeln(' mime描述：'+window.navigator.mimeTypes[i].description);
5     document.writeln(' mime尾碼：'+window.navigator.mimeTypes[i].suffixes);
6     document.writeln('<br />');
7 }

備註

至於其他瀏覽器對象，用到的不是很多，暫不介紹。

生命賦予了我們靈魂，卻沒有教會我們如何走，關於情感的路，需要的是兩個人風雨同舟。