本文例項講述了JS瀏覽器BOM常見操作。分享給大家供大家參考，具體如下：

window尺寸

有三種方法能夠確定瀏覽器視窗的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

 window.innerHeight - 瀏覽器視窗的內部高度
 
 window.innerWidth - 瀏覽器視窗的內部寬度
 

對於 Internet Explorer 8、7、6、5：

 document.documentElement.clientHeight
 
 document.documentElement.clientWidth
 

或者

 document.documentElement.clientHeight
 
 document.documentElement.clientWidth
 

實用的 JavaScript 方案（涵蓋所有瀏覽器）：

 <script>
 var w=window.innerWidth
 || document.documentElement.clientWidth
 || document.body.clientWidth;
 var h=window.innerHeight
 || document.documentElement.clientHeight
 || document.body.clientHeight;
 x=document.getElementById("demo");
 x.innerHTML="瀏覽器window寬度: " + w + ",高度: " + h + "。"
 </script>
 

其他 Window 方法

 window.open() - 開啟新視窗
 
 window.close() - 關閉當前視窗
 
 window.moveTo() - 移動當前視窗
 
 window.resizeTo() - 調整當前視窗的尺寸
 

Window Screen

window.screen物件在編寫時可以不使用 window 這個字首。

 screen.availWidth - 可用的螢幕寬度
 
 screen.availHeight - 可用的螢幕高度
 

Window Screen 可用寬度

screen.availWidth 屬性返回訪問者螢幕的寬度，以畫素計，減去介面特性，比如視窗工作列。

Window Screen 可用高度

screen.availHeight 屬性返回訪問者螢幕的高度，以畫素計，減去介面特性，比如視窗工作列。

Window Location

   location.hostname 返回 web 主機的域名
 
   location.pathname 返回當前頁面的路徑和檔名
 
   location.port 返回 web 主機的埠 （80 或 443）
 
   location.protocol 返回所使用的 web 協議（http:// 或 https://）
 
   location.href 屬性返回當前頁面的 URL。
 
   location.pathname 屬性返回 URL 的路徑名。
 
   location.assign() 方法載入新的文件。
 
 

Window History

   history.back() - 與在瀏覽器點選後退按鈕相同
 
   history.forward() - 與在瀏覽器中點選按鈕向前相同
 

JavaScript Navigator

window.navigator 物件包含有關訪問者瀏覽器的資訊。

警告!!!

來自 navigator 物件的資訊具有誤導性，不應該被用於檢測瀏覽器版本，這是因為：

• navigator 資料可被瀏覽器使用者更改

• 一些瀏覽器對測試站點會識別錯誤

• 瀏覽器無法報告晚於瀏覽器釋出的新作業系統

JavaScript 彈窗

可以在 JavaScript 中建立三種訊息框：警告框、確認框、提示框。

警告框

警告框經常用於確保使用者可以得到某些資訊。

當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。

語法

window.alert("sometext");

window.alert() 方法可以不帶上window物件，直接使用alert()方法。

確認框

確認框通常用於驗證是否接受使用者操作。

當確認卡彈出時，使用者可以點選 "確認" 或者 "取消" 來確定使用者操作。

當你點選 "確認",確認框返回 true， 如果點選 "取消",確認框返回 false。

語法

window.confirm("sometext");

window.confirm() 方法可以不帶上window物件，直接使用confirm()方法。

提示框

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

當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。

如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。

語法

window.prompt("sometext","defaultvalue");

window.prompt() 方法可以不帶上window物件，直接使用prompt()方法。

換行

彈窗使用 反斜槓 + "n"(\n) 來設定換行。

JavaScript 計時事件

通過使用 JavaScript，我們有能力作到在一個設定的時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。我們稱之為計時事件。

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

 setInterval() - 間隔指定的毫秒數不停地執行指定的程式碼。
 
 setTimeout() - 暫停指定的毫秒數後執行指定的程式碼
 

Note: setInterval() 和 setTimeout() 是 HTML DOM Window物件的兩個方法。

setInterval() 方法

setInterval() 間隔指定的毫秒數不停地執行指定的程式碼

語法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window字首，直接使用函式setInterval()。

setInterval() 第一個引數是函式（function）。第二個引數間隔的毫秒數

如何停止執行?

clearInterval() 方法用於停止 setInterval() 方法執行的函式程式碼。

語法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window字首，直接使用函式clearInterval()。

要使用 clearInterval() 方法,在建立計時方法時你必須使用全域性變數：

myVar=setInterval("javascript function",milliseconds);

然後可以使用clearInterval() 方法來停止執行。

setTimeout() 方法

語法

 window.setTimeout("javascript 函式",毫秒數);

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。

setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg()"。

第二個引數指示從當前起多少毫秒後執行第一個引數。

如何停止執行?

clearTimeout() 方法用於停止執行setTimeout()方法的函式程式碼。

語法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 字首。

要使用clearTimeout() 方法,你必須在建立超時方法中（setTimeout）使用全域性變數:

myVar=setTimeout("javascript function",milliseconds);

如果函式還未被執行，你可以使用 clearTimeout() 方法來停止執行函式程式碼。

JavaScript Cookies

Cookies 用於儲存 web 頁面的使用者資訊。

什麼是 Cookies？

Cookies 是一些資料,儲存於你電腦上的文字檔案中。

當 web 伺服器向瀏覽器傳送 web 頁面時，在連線關閉後，服務端不會記錄使用者的資訊。

Cookies 的作用就是用於解決 "如何記錄客戶端的使用者資訊":

• 當用戶訪問 web 頁面時，他的名字可以記錄在 cookie 中。

• 在使用者下一次訪問該頁面時，可以在 cookie 中讀取使用者訪問記錄。

Cookies 以名/值對形式儲存，如下所示:

username=John Doe

當瀏覽器從伺服器上請求 web 頁面時， 屬於該頁面的 cookies 會被新增到該請求中。服務端通過這種方式來獲取使用者的資訊。

使用 JavaScript 建立Cookie

JavaScript 可以使用 document.cookie 屬性來建立 、讀取、及刪除 cookies。

JavaScript 中，建立 cookie 如下所示：

document.cookie="username=John Doe";

還可以為 cookie 新增一個過期時間（以 UTC 或 GMT 時間）。預設情況下，cookie 在瀏覽器關閉時刪除：

document.cookie="username=John Doe; expires=Thu,18 Dec 2013 12:00:00 GMT";

可以使用 path 引數告訴瀏覽器 cookie 的路徑。預設情況下，cookie 屬於當前頁面。

document.cookie="username=John Doe; expires=Thu,18 Dec 2013 12:00:00 GMT; path=/";

使用 JavaScript 讀取 Cookie

在 JavaScript 中,可以使用以下程式碼來讀取 cookies：

 var x = document.cookie;
 document.cookie 將以字串的方式返回所有的 cookies，型別格式： cookie1=value; cookie2=value; cookie3=value;
 

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookies 類似於建立 cookies，如下所示：

document.cookie="username=John Smith; expires=Thu,18 Dec 2013 12:00:00 GMT; path=/";

舊的 cookie 將被覆蓋。

使用 JavaScript 刪除 Cookie

刪除 cookie 非常簡單。您只需要設定 expires 引數為以前的時間即可，如下所示，設定為 Thu,01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu,01 Jan 1970 00:00:00 GMT";

注意，當您刪除時不必指定 cookie 的值。

設定 cookie 值的函式

首先，我們建立一個函式用於儲存訪問者的名字：

 //cookie 的名稱為 cname，cookie 的值為 cvalue，並設定了 cookie 的過期時間 expires。
 function setCookie(cname,cvalue,exdays)
 {
 var d = new Date();
 d.setTime(d.getTime()+(exdays*24*60*60*1000));
 var expires = "expires="+d.toGMTString();
 document.cookie = cname + "=" + cvalue + "; " + expires;
 }
 

獲取 cookie 值的函式

然後，我們建立一個函式使用者返回指定 cookie 的值：

 function getCookie(cname)
 {
 var name = cname + "=";//建立一個文字變數用於檢索指定 cookie :cname + "="。
 var ca = document.cookie.split(';');//使用分號來分割 document.cookie 字串，並將分割後的字串陣列賦值給 ca (ca = document.cookie.split(';'))。
 //迴圈 ca 陣列 (i=0;i<ca.length;i++)，然後讀取陣列中的每個值，並去除前後空格 (c=ca[i].trim())。
 for(var i=0; i<ca.length; i++)
  {
  var c = ca[i].trim();
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);//如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
  }
 return "";//如果沒有找到 cookie,返回 ""。
 }
 

檢測 cookie 值的函式

最後，我們可以建立一個檢測 cookie 是否建立的函式。

如果設定了 cookie，將顯示一個問候資訊。

如果沒有設定 cookie，將會顯示一個彈窗用於詢問訪問者的名字，並呼叫 setCookie 函式將訪問者的名字儲存 365 天：

 function checkCookie()
 {
 var username=getCookie("username");
 if (username!="")
  {
  alert("Welcome again " + username);
  }
 else
  {
  username = prompt("Please enter your name:","");
  if (username!="" && username!=null)
   {
   setCookie("username",username,365);
   }
  }
 }
 

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》

希望本文所述對大家JavaScript程式設計有所幫助。