JavaScript Window - 瀏覽器對象模型
瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器“對話”。
瀏覽器對象模型 (BOM)
瀏覽器對象模型（Browser Object Model）尚無正式標準。
由于現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。
Window 對象
所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
甚至 HTML DOM 的 document 也是 window 對象的屬性之一：
window.document.getElementById("header");
與此相同：
document.getElementById("header");
Window 尺寸
有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。
對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerHeight - 瀏覽器窗口的內部高度
- window.innerWidth - 瀏覽器窗口的內部寬度
對于 Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
實用的 JavaScript 方案（涵蓋所有瀏覽器）：
實例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
親自試一試
<small>該例顯示瀏覽器窗口的高度和寬度：（不包括工具欄/滾動條）
其他 Window 方法
一些其他方法：
- window.open() - 打開新窗口
- window.close() - 關閉當前窗口
- window.moveTo() - 移動當前窗口
- window.resizeTo() - 調整當前窗口的尺寸</small>
分割線
</br>
JavaScript Window Screen
window.screen 對象包含有關用戶屏幕的信息。
Window Screen
window.screen 對象在編寫時可以不使用 window 這個前綴。
一些屬性：
- screen.availWidth - 可用的屏幕寬度
- screen.availHeight - 可用的屏幕高度
Window Screen 可用寬度
screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如窗口任務欄。
實例
返回您的屏幕的可用寬度：
<script>
document.write("可用寬度：" +screen.availWidth);
</script>
以上代碼輸出為：
可用寬度：1920
Window Screen 可用高度
screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如窗口任務欄。
實例
返回您的屏幕的可用高度：
<script>
document.write("可用高度：" +screen.availHeight);
</script>
以上代碼輸出為：
可用高度：1040
分割線
</br>
JavaScript Window History
window.history 對象包含瀏覽器的歷史。
Window History
window.history 對象在編寫時可不使用 window 這個前綴。
為了保護用戶隱私，對 JavaScript 訪問該對象的方法做出了限制。
一些方法：
- history.back() - 與在瀏覽器點擊后退按鈕相同
- history.forward() - 與在瀏覽器中點擊按鈕向前相同
Window History Back
history.back() 方法加載歷史列表中的前一個 URL。
這與在瀏覽器中點擊后退按鈕是相同的：
實例
在頁面上創建后退按鈕：
<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
以上代碼輸出為：
轉到上一頁
Window History Forward
history forward() 方法加載歷史列表中的下一個 URL。
這與在瀏覽器中點擊前進按鈕是相同的：
實例
在頁面上創建一個向前的按鈕：
<html>
<head>
<script>
function goForward() {
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>
以上代碼輸出為：
轉到下一頁
分割線
</br>
JavaScript Window Navigator
window.navigator 對象包含有關訪問者瀏覽器的信息。
Window Navigator
window.navigator 對象在編寫時可不使用 window 這個前綴。
實例
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
親自試一試
警告：來自 navigator 對象的信息具有誤導性，不應該被用于檢測瀏覽器版本，這是因為：
- navigator 數據可被瀏覽器使用者更改
- 瀏覽器無法報告晚于瀏覽器發布的新操作系統
瀏覽器檢測
由于 navigator 可誤導瀏覽器檢測，使用對象檢測可用來嗅探不同的瀏覽器。
由于不同的瀏覽器支持不同的對象，您可以使用對象來檢測瀏覽器。例如，由于只有 Opera 支持屬性 "window.opera"，您可以據此識別出 Opera。
例子：if (window.opera) {...some action...}
分割線
</br>
JavaScript 消息框（JS PopupAlert）
可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。
實例
警告框：alert("我是警告框！！")
帶有折行的警告框：alert("再次向您問好！在這里，我們向您演示" + '\n' + "如何向警告框添加折行。")
確認框：confirm("Press a button!");
提示框：prompt("請輸入您的名字","Bill Gates")
警告框
警告框經常用于確保用戶可以得到某些信息。
當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。
語法：
alert("文本")
確認框
確認框用于使用戶可以驗證或者接受某些信息。
當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作。
如果用戶點擊確認，那么返回值為 true。如果用戶點擊取消，那么返回值為 false。
語法：
confirm("文本")
提示框
提示框經常用于提示用戶在進入頁面前輸入某個值。
當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。
如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。
語法：
prompt("文本","默認值")
分割線
</br>
JavaScript 計時（JS Timing）
通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。我們稱之為計時事件。
實例
<small>簡單的計時
單擊本例中的按鈕后，會在 5 秒后彈出一個警告框。
另一個簡單的計時
本例中的程序會執行 2 秒、4 秒和 6 秒的計時。
在一個無窮循環中的計時事件
在本例中，單擊開始計時按鈕后，程序開始從 0 以秒計時。
帶有停止按鈕的無窮循環中的計時事件
在本例中，點擊計數按鈕后根據用戶輸入的數值開始倒計時，點擊停止按鈕停止計時。
使用計時事件制作的鐘表
一個 JavaScript 小時鐘
</small>
JavaScript 計時事件
通過使用 JavaScript，我們有能力作到在一個設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。我們稱之為計時事件。
在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:
setTimeout()
未來的某時執行代碼
clearTimeout()
取消setTimeout()
setTimeout()
語法
var t=setTimeout("javascript語句",毫秒)
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。
setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。
第二個參數指示從當前起多少毫秒后執行第一個參數。
提示：1000 毫秒等于一秒。
實例
當下面這個例子中的按鈕被點擊時，一個提示框會在5秒中后彈出。
<html>
<head>
<script type="text/javascript">
function timedMsg() {
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
實例 - 無窮循環
要創建一個運行于無窮循環中的計時器，我們需要編寫一個函數來調用其自身。在下面的例子中，當按鈕被點擊后，輸入域便從 0 開始計數。
<html>
<head>
<script type="text/javascript">
var c=0var tfunction timedCount() {
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
clearTimeout()
語法
clearTimeout(setTimeout_variable)
實例
下面的例子和上面的無窮循環的例子相似。唯一的不同是，現在我們添加了一個 "Stop Count!" 按鈕來停止這個計數器：
<html>
<head>
<script type="text/javascript">
var c=0var tfunction timedCount() {
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount() {
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
分割線
JavaScript Cookies
cookie 用來識別用戶。
實例
創建一個歡迎 cookie
利用用戶在提示框中輸入的數據創建一個 JavaScript Cookie，當該用戶再次訪問該頁面時，根據 cookie 中的信息發出歡迎信息。
什么是cookie?
cookie 是存儲于訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。
有關cookie的例子：
名字 cookie
- 當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會存儲于 cookie 中。當訪問者再次訪問網站時，他們會收到類似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。
密碼 cookie
- 當訪問者首次訪問頁面時，他或她也許會填寫他/她們的密碼。密碼也可被存儲于 cookie 中。當他們再次訪問網站時，密碼就會從 cookie 中取回。
日期 cookie
- 當訪問者首次訪問你的網站時，當前的日期可存儲于 cookie 中。當他們再次訪問網站時，他們會收到類似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。
創建和存儲 cookie
在這個例子中我們要創建一個存儲訪問者名字的 cookie。當訪問者首次訪問網站時，他們會被要求填寫姓名。名字會存儲于 cookie 中。當訪問者再次訪問網站時，他們就會收到歡迎詞。
首先，我們會創建一個可在 cookie 變量中存儲訪問者姓名的函數：
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
上面這個函數中的參數存有 cookie 的名稱、值以及過期天數。
在上面的函數中，我們首先將天數轉換為有效的日期，然后，我們將 cookie 名稱、值及其過期日期存入 document.cookie 對象。
之后，我們要創建另一個函數來檢查是否已設置 cookie：
function getCookie(c_name){
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1) {
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
上面的函數首先會檢查 document.cookie 對象中是否存有 cookie。假如 document.cookie 對象存有某些 cookie，那么會繼續檢查我們指定的 cookie 是否已儲存。如果找到了我們要的 cookie，就返回值，否則返回空字符串。
最后，我們要創建一個函數，這個函數的作用是：如果 cookie 已設置，則顯示歡迎詞，否則顯示提示框來要求用戶輸入名字。
function checkCookie(){
username=getCookie('username')
if (username!=null && username!="") {
alert('Welcome again '+username+'!')}
else {
username=prompt('Please enter your name:',"")
if (username!=null && username!="") {
setCookie('username',username,365)
}
}
}
這是所有的代碼：
<html>
<head>
<script type="text/javascript">
function getCookie(c_name){
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1) {
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function checkCookie(){
username=getCookie('username')
if (username!=null && username!="") {
alert('Welcome again '+username+'!')}
else {
username=prompt('Please enter your name:',"")
if (username!=null && username!="") {
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>