JavaScript Window - 瀏覽器對(duì)象模型
瀏覽器對(duì)象模型 (BOM) 使 JavaScript 有能力與瀏覽器“對(duì)話”耙蔑。
瀏覽器對(duì)象模型 (BOM)
瀏覽器對(duì)象模型(Browser Object Model)尚無正式標(biāo)準(zhǔn)。
由于現(xiàn)代瀏覽器已經(jīng)(幾乎)實(shí)現(xiàn)了 JavaScript 交互性方面的相同方法和屬性,因此常被認(rèn)為是 BOM 的方法和屬性。
Window 對(duì)象
所有瀏覽器都支持 window 對(duì)象。它表示瀏覽器窗口。
所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員丹锹。
全局變量是 window 對(duì)象的屬性稀颁。
全局函數(shù)是 window 對(duì)象的方法。
甚至 HTML DOM 的 document 也是 window 對(duì)象的屬性之一:
window.document.getElementById("header");
與此相同:
document.getElementById("header");
Window 尺寸
有三種方法能夠確定瀏覽器窗口的尺寸(瀏覽器的視口楣黍,不包括工具欄和滾動(dòng)條)匾灶。
對(duì)于Internet Explorer、Chrome租漂、Firefox阶女、Opera 以及 Safari:
- window.innerHeight - 瀏覽器窗口的內(nèi)部高度
- window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
對(duì)于 Internet Explorer 8、7哩治、6秃踩、5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
實(shí)用的 JavaScript 方案(涵蓋所有瀏覽器):
實(shí)例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
親自試一試
<small>該例顯示瀏覽器窗口的高度和寬度:(不包括工具欄/滾動(dòng)條)
其他 Window 方法
一些其他方法:
- window.open() - 打開新窗口
- window.close() - 關(guān)閉當(dāng)前窗口
- window.moveTo() - 移動(dòng)當(dāng)前窗口
- window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸</small>
分割線
</br>
JavaScript Window Screen
window.screen 對(duì)象包含有關(guān)用戶屏幕的信息。
Window Screen
window.screen 對(duì)象在編寫時(shí)可以不使用 window 這個(gè)前綴业筏。
一些屬性:
- screen.availWidth - 可用的屏幕寬度
- screen.availHeight - 可用的屏幕高度
Window Screen 可用寬度
screen.availWidth 屬性返回訪問者屏幕的寬度憔杨,以像素計(jì),減去界面特性蒜胖,比如窗口任務(wù)欄消别。
實(shí)例
返回您的屏幕的可用寬度:
<script>
document.write("可用寬度:" +screen.availWidth);
</script>
以上代碼輸出為:
可用寬度:1920
Window Screen 可用高度
screen.availHeight 屬性返回訪問者屏幕的高度,以像素計(jì)台谢,減去界面特性寻狂,比如窗口任務(wù)欄。
實(shí)例
返回您的屏幕的可用高度:
<script>
document.write("可用高度:" +screen.availHeight);
</script>
以上代碼輸出為:
可用高度:1040
分割線
</br>
JavaScript Window History
window.history 對(duì)象包含瀏覽器的歷史朋沮。
Window History
window.history 對(duì)象在編寫時(shí)可不使用 window 這個(gè)前綴蛇券。
為了保護(hù)用戶隱私,對(duì) JavaScript 訪問該對(duì)象的方法做出了限制樊拓。
一些方法:
- history.back() - 與在瀏覽器點(diǎn)擊后退按鈕相同
- history.forward() - 與在瀏覽器中點(diǎn)擊按鈕向前相同
Window History Back
history.back() 方法加載歷史列表中的前一個(gè) URL怀读。
這與在瀏覽器中點(diǎn)擊后退按鈕是相同的:
實(shí)例
在頁面上創(chuàng)建后退按鈕:
<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
以上代碼輸出為:
轉(zhuǎn)到上一頁
Window History Forward
history forward() 方法加載歷史列表中的下一個(gè) URL。
這與在瀏覽器中點(diǎn)擊前進(jìn)按鈕是相同的:
實(shí)例
在頁面上創(chuàng)建一個(gè)向前的按鈕:
<html>
<head>
<script>
function goForward() {
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>
</html>
以上代碼輸出為:
轉(zhuǎn)到下一頁
分割線
</br>
JavaScript Window Navigator
window.navigator 對(duì)象包含有關(guān)訪問者瀏覽器的信息骑脱。
Window Navigator
window.navigator 對(duì)象在編寫時(shí)可不使用 window 這個(gè)前綴。
實(shí)例
<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 對(duì)象的信息具有誤導(dǎo)性苍糠,不應(yīng)該被用于檢測(cè)瀏覽器版本叁丧,這是因?yàn)椋?/p>
- navigator 數(shù)據(jù)可被瀏覽器使用者更改
- 瀏覽器無法報(bào)告晚于瀏覽器發(fā)布的新操作系統(tǒng)
瀏覽器檢測(cè)
由于 navigator 可誤導(dǎo)瀏覽器檢測(cè),使用對(duì)象檢測(cè)可用來嗅探不同的瀏覽器岳瞭。
由于不同的瀏覽器支持不同的對(duì)象拥娄,您可以使用對(duì)象來檢測(cè)瀏覽器。例如瞳筏,由于只有 Opera 支持屬性 "window.opera"稚瘾,您可以據(jù)此識(shí)別出 Opera。
例子:if (window.opera) {...some action...}
分割線
</br>
JavaScript 消息框(JS PopupAlert)
可以在 JavaScript 中創(chuàng)建三種消息框:警告框姚炕、確認(rèn)框摊欠、提示框丢烘。
實(shí)例
警告框:alert("我是警告框!些椒!")
帶有折行的警告框:alert("再次向您問好播瞳!在這里,我們向您演示" + '\n' + "如何向警告框添加折行免糕。")
確認(rèn)框:confirm("Press a button!");
提示框:prompt("請(qǐng)輸入您的名字","Bill Gates")
警告框
警告框經(jīng)常用于確保用戶可以得到某些信息赢乓。
當(dāng)警告框出現(xiàn)后,用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作石窑。
語法:
alert("文本")
確認(rèn)框
確認(rèn)框用于使用戶可以驗(yàn)證或者接受某些信息牌芋。
當(dāng)確認(rèn)框出現(xiàn)后,用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作松逊。
如果用戶點(diǎn)擊確認(rèn)躺屁,那么返回值為 true。如果用戶點(diǎn)擊取消棺棵,那么返回值為 false楼咳。
語法:
confirm("文本")
提示框
提示框經(jīng)常用于提示用戶在進(jìn)入頁面前輸入某個(gè)值。
當(dāng)提示框出現(xiàn)后烛恤,用戶需要輸入某個(gè)值母怜,然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。
如果用戶點(diǎn)擊確認(rèn)缚柏,那么返回值為輸入的值苹熏。如果用戶點(diǎn)擊取消,那么返回值為 null币喧。
語法:
prompt("文本","默認(rèn)值")
分割線
</br>
JavaScript 計(jì)時(shí)(JS Timing)
通過使用 JavaScript轨域,我們有能力做到在一個(gè)設(shè)定的時(shí)間間隔之后來執(zhí)行代碼,而不是在函數(shù)被調(diào)用后立即執(zhí)行杀餐。我們稱之為計(jì)時(shí)事件干发。
實(shí)例
<small>簡(jiǎn)單的計(jì)時(shí)
單擊本例中的按鈕后,會(huì)在 5 秒后彈出一個(gè)警告框史翘。
另一個(gè)簡(jiǎn)單的計(jì)時(shí)
本例中的程序會(huì)執(zhí)行 2 秒枉长、4 秒和 6 秒的計(jì)時(shí)。
在一個(gè)無窮循環(huán)中的計(jì)時(shí)事件
在本例中琼讽,單擊開始計(jì)時(shí)按鈕后必峰,程序開始從 0 以秒計(jì)時(shí)。
帶有停止按鈕的無窮循環(huán)中的計(jì)時(shí)事件
在本例中钻蹬,點(diǎn)擊計(jì)數(shù)按鈕后根據(jù)用戶輸入的數(shù)值開始倒計(jì)時(shí)吼蚁,點(diǎn)擊停止按鈕停止計(jì)時(shí)。
使用計(jì)時(shí)事件制作的鐘表
一個(gè) JavaScript 小時(shí)鐘
</small>
JavaScript 計(jì)時(shí)事件
通過使用 JavaScript问欠,我們有能力作到在一個(gè)設(shè)定的時(shí)間間隔之后來執(zhí)行代碼肝匆,而不是在函數(shù)被調(diào)用后立即執(zhí)行粒蜈。我們稱之為計(jì)時(shí)事件。
在 JavaScritp 中使用計(jì)時(shí)事件是很容易的术唬,兩個(gè)關(guān)鍵方法是:
setTimeout()
未來的某時(shí)執(zhí)行代碼
clearTimeout()
取消setTimeout()
setTimeout()
語法
var t=setTimeout("javascript語句",毫秒)
setTimeout() 方法會(huì)返回某個(gè)值薪伏。在上面的語句中,值被儲(chǔ)存在名為 t 的變量中粗仓。假如你希望取消這個(gè) setTimeout()嫁怀,你可以使用這個(gè)變量名來指定它。
setTimeout() 的第一個(gè)參數(shù)是含有 JavaScript 語句的字符串借浊。這個(gè)語句可能諸如 "alert('5 seconds!')"塘淑,或者對(duì)函數(shù)的調(diào)用,諸如 alertMsg()"蚂斤。
第二個(gè)參數(shù)指示從當(dāng)前起多少毫秒后執(zhí)行第一個(gè)參數(shù)存捺。
提示:1000 毫秒等于一秒。
實(shí)例
當(dāng)下面這個(gè)例子中的按鈕被點(diǎn)擊時(shí)曙蒸,一個(gè)提示框會(huì)在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>
實(shí)例 - 無窮循環(huán)
要?jiǎng)?chuàng)建一個(gè)運(yùn)行于無窮循環(huán)中的計(jì)時(shí)器,我們需要編寫一個(gè)函數(shù)來調(diào)用其自身纽窟。在下面的例子中肖油,當(dāng)按鈕被點(diǎn)擊后,輸入域便從 0 開始計(jì)數(shù)臂港。
<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)
實(shí)例
下面的例子和上面的無窮循環(huán)的例子相似森枪。唯一的不同是,現(xiàn)在我們添加了一個(gè) "Stop Count!" 按鈕來停止這個(gè)計(jì)數(shù)器:
<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 用來識(shí)別用戶审孽。
實(shí)例
創(chuàng)建一個(gè)歡迎 cookie
利用用戶在提示框中輸入的數(shù)據(jù)創(chuàng)建一個(gè) JavaScript Cookie县袱,當(dāng)該用戶再次訪問該頁面時(shí),根據(jù) cookie 中的信息發(fā)出歡迎信息佑力。
什么是cookie?
cookie 是存儲(chǔ)于訪問者的計(jì)算機(jī)中的變量式散。每當(dāng)同一臺(tái)計(jì)算機(jī)通過瀏覽器請(qǐng)求某個(gè)頁面時(shí),就會(huì)發(fā)送這個(gè) cookie打颤。你可以使用 JavaScript 來創(chuàng)建和取回 cookie 的值杂数。
有關(guān)cookie的例子:
名字 cookie
- 當(dāng)訪問者首次訪問頁面時(shí),他或她也許會(huì)填寫他/她們的名字瘸洛。名字會(huì)存儲(chǔ)于 cookie 中。當(dāng)訪問者再次訪問網(wǎng)站時(shí)次和,他們會(huì)收到類似 "Welcome John Doe!" 的歡迎詞反肋。而名字則是從 cookie 中取回的。
密碼 cookie
- 當(dāng)訪問者首次訪問頁面時(shí)踏施,他或她也許會(huì)填寫他/她們的密碼石蔗。密碼也可被存儲(chǔ)于 cookie 中罕邀。當(dāng)他們?cè)俅卧L問網(wǎng)站時(shí),密碼就會(huì)從 cookie 中取回养距。
日期 cookie
- 當(dāng)訪問者首次訪問你的網(wǎng)站時(shí)诉探,當(dāng)前的日期可存儲(chǔ)于 cookie 中。當(dāng)他們?cè)俅卧L問網(wǎng)站時(shí)棍厌,他們會(huì)收到類似這樣的一條消息:"Your last visit was on Tuesday August 11, 2005!"肾胯。日期也是從 cookie 中取回的。
創(chuàng)建和存儲(chǔ) cookie
在這個(gè)例子中我們要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)訪問者名字的 cookie耘纱。當(dāng)訪問者首次訪問網(wǎng)站時(shí)敬肚,他們會(huì)被要求填寫姓名。名字會(huì)存儲(chǔ)于 cookie 中束析。當(dāng)訪問者再次訪問網(wǎng)站時(shí)艳馒,他們就會(huì)收到歡迎詞。
首先员寇,我們會(huì)創(chuàng)建一個(gè)可在 cookie 變量中存儲(chǔ)訪問者姓名的函數(shù):
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())
}
上面這個(gè)函數(shù)中的參數(shù)存有 cookie 的名稱弄慰、值以及過期天數(shù)。
在上面的函數(shù)中蝶锋,我們首先將天數(shù)轉(zhuǎn)換為有效的日期陆爽,然后,我們將 cookie 名稱牲览、值及其過期日期存入 document.cookie 對(duì)象墓陈。
之后,我們要?jiǎng)?chuàng)建另一個(gè)函數(shù)來檢查是否已設(shè)置 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 ""
}
上面的函數(shù)首先會(huì)檢查 document.cookie 對(duì)象中是否存有 cookie第献。假如 document.cookie 對(duì)象存有某些 cookie贡必,那么會(huì)繼續(xù)檢查我們指定的 cookie 是否已儲(chǔ)存。如果找到了我們要的 cookie庸毫,就返回值仔拟,否則返回空字符串。
最后飒赃,我們要?jiǎng)?chuàng)建一個(gè)函數(shù)利花,這個(gè)函數(shù)的作用是:如果 cookie 已設(shè)置,則顯示歡迎詞载佳,否則顯示提示框來要求用戶輸入名字炒事。
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>