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個參數：一、新窗口的URL 二、窗口名稱或目標 三、設置窗口屬性 。以下所示：

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的定時器一共有兩種：一、超時操做（setTimeOut） 二、間歇操做（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 }

備註

至於其餘瀏覽器對象，用到的不是不少，暫不介紹。

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