JS瀏覽器BOM常見操作實例詳解

本文實例講述了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 方案（涵蓋所有瀏覽器）：

其他 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"(
) 來設置換行。
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); } } }