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 }
備注
至于其他瀏覽器物件，用到的不是很多，暫不介紹，
生命賦予了我們靈魂，卻沒有教會我們如何走，關于情感的路，需要的是兩個人風雨同舟，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/148811.html
標籤：JavaScript