瀏覽器對(duì)象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對(duì)話"布疙。
瀏覽器對(duì)象模型 (BOM)
indow 尺寸
有三種方法能夠確定瀏覽器窗口的尺寸溉苛。
對(duì)于Internet Explorer锈至、Chrome众雷、Firefox稚晚、Opera 以及 Safari:
window.innerHeight - 瀏覽器窗口的內(nèi)部高度(包括滾動(dòng)條)
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度(包括滾動(dòng)條)
對(duì)于 Internet Explorer 8姻采、7雅采、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
實(shí)用的 JavaScript 方案(涵蓋所有瀏覽器):
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
其他 Window 方法
window.open() - 打開新窗口
window.close() - 關(guān)閉當(dāng)前窗口
window.moveTo() - 移動(dòng)當(dāng)前窗口
window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸
Window Screen
對(duì)象包含有關(guān)用戶屏幕的信息
screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度
Window Location
用于獲得當(dāng)前頁(yè)面的地址 (URL)慨亲,并把瀏覽器重定向到新的頁(yè)面
location.hostname 返回 web 主機(jī)的域名
location.pathname 返回當(dāng)前頁(yè)面的路徑和文件名
location.port 返回 web 主機(jī)的端口 (80 或 443)
location.protocol 返回所使用的 web 協(xié)議(http:// 或 https://)
location.href 屬性返回當(dāng)前頁(yè)面的 URL婚瓜。
<script>
document.write(location.href);
</script>
Window History
包含瀏覽器的歷史
history.back() - 與在瀏覽器點(diǎn)擊后退按鈕相同
history.forward() - 與在瀏覽器中點(diǎn)擊向前按鈕相同
history.go() 這個(gè)方法來(lái)實(shí)現(xiàn)向前,后退的功能
function a(){
history.go(1); // go() 里面的參數(shù)表示跳轉(zhuǎn)頁(yè)面的個(gè)數(shù) 例如 history.go(1) 表示前進(jìn)一個(gè)頁(yè)面
}
function b(){
history.go(-1); // go() 里面的參數(shù)表示跳轉(zhuǎn)頁(yè)面的個(gè)數(shù) 例如 history.go(-1) 表示后退一個(gè)頁(yè)面
}
window.navigator 對(duì)象包含有關(guān)訪問(wèn)者瀏覽器的信息刑棵。
三種消息框:警告框巴刻、確認(rèn)框、提示框蛉签。
警告框
alert("你好胡陪,我是一個(gè)警告框!")
確認(rèn)框
確認(rèn)框通常用于驗(yàn)證是否接受用戶操作碍舍。
當(dāng)確認(rèn)卡彈出時(shí)柠座,用戶可以點(diǎn)擊 "確認(rèn)" 或者 "取消" 來(lái)確定用戶操作。
當(dāng)你點(diǎn)擊 "確認(rèn)", 確認(rèn)框返回 true片橡, 如果點(diǎn)擊 "取消", 確認(rèn)框返回 false妈经。
var r=confirm("按下按鈕");
if (r==true)
{
x="你按下了\"確定\"按鈕!";
}
else
{
x="你按下了\"取消\"按鈕!";
}
提示框
var person=prompt("請(qǐng)輸入你的名字","Harry Potter");
if (person!=null && person!="")
{
x="你好 " + person + "! 今天感覺如何?";
document.getElementById("demo").innerHTML=x;
}
換行
彈窗使用 反斜杠 + "n"(\n) 來(lái)設(shè)置換行。
alert("Hello\nHow are you?");
計(jì)時(shí)事件
setInterval() - 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼捧书。
setTimeout() - 在指定的毫秒數(shù)后執(zhí)行指定代碼吹泡。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window對(duì)象的兩個(gè)方法。
//每三秒彈出 "hello" :
setInterval(function(){alert("Hello")},3000);
//clearInterval() 方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼
等待3秒经瓷,然后彈出 "Hello":
setTimeout(function(){alert("Hello")},3000);
clearTimeout() 方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼爆哑。
JavaScript Cookie
ookie 是一些數(shù)據(jù), 存儲(chǔ)于你電腦上的文本文件中。
當(dāng) web 服務(wù)器向?yàn)g覽器發(fā)送 web 頁(yè)面時(shí)舆吮,在連接關(guān)閉后揭朝,服務(wù)端不會(huì)記錄用戶的信息。
當(dāng)用戶訪問(wèn) web 頁(yè)面時(shí)歪泳,他的名字可以記錄在 cookie 中萝勤。
在用戶下一次訪問(wèn)該頁(yè)面時(shí)露筒,可以在 cookie 中讀取用戶訪問(wèn)記錄呐伞。