BOM簡(jiǎn)介
BOM即瀏覽器對(duì)象模型(Brower Object Model)
瀏覽器對(duì)象包括 :
Window(窗口)
Navigator(瀏覽器)
Screen (客戶端屏幕)
History(訪問歷史)
Location(瀏覽器地址)
Window對(duì)象
- 獲取文檔顯示區(qū)域的高度和寬度
一旦頁(yè)面加載，就會(huì)自動(dòng)創(chuàng)建window對(duì)象载佳，所以無需手動(dòng)創(chuàng)建window對(duì)象。
通過window對(duì)象可以獲取文檔顯示區(qū)域的高度和寬度
<script>
document.write("文檔內(nèi)容");
document.write("文檔顯示區(qū)域的寬度"+window.innerWidth);
document.write("<br>");
document.write("文檔顯示區(qū)域的高度"+window.innerHeight);
</script>
- 獲取外部窗體的寬度和高度
所謂的外部窗體即瀏覽器主守，可能用的是360，火狐插龄，IE, Chrome等等挠说。
<script>
document.write("瀏覽器的寬度:"+window.outerWidth);
document.write("<br>");
document.write("瀏覽器的高度:"+window.outerHeight);
</script>
- 打開一個(gè)新的窗口
有的時(shí)候，你碰到一些網(wǎng)站會(huì)自動(dòng)打開另一個(gè)網(wǎng)站溃肪，那么是怎么做到的呢?
就是通過window的open方法做到的
不建議使用，如果需要打開一個(gè)新的網(wǎng)站音五，應(yīng)該通過超級(jí)鏈接等方式讓用戶主動(dòng)打開惫撰，在沒有告知用戶的前提下就打開一個(gè)新的網(wǎng)站會(huì)影響用戶的體驗(yàn)
<script>
function openNewWindow(){
myWindow=window.open("/");
}
</script>
<button onclick="openNewWindow()">打開一個(gè)新的窗口</button>
Navigator對(duì)象
Navigator即瀏覽器對(duì)象，提供瀏覽器相關(guān)的信息
<script type="text/javascript">
document.write("<p>瀏覽器產(chǎn)品名稱：");
document.write(navigator.appName + "</p>");
document.write("<p>瀏覽器版本號(hào)：");
document.write(navigator.appVersion + "</p>");
document.write("<p>瀏覽器內(nèi)部代碼：");
document.write(navigator.appCodeName + "</p>");
document.write("<p>瀏覽器程序位數(shù)（或者操作系統(tǒng)）：");
document.write(navigator.platform + "</p>");
document.write("<p>是否啟用Cookies：");
document.write(navigator.cookieEnabled + "</p>");
document.write("<p>瀏覽器的用戶代理報(bào)頭：");
document.write(navigator.userAgent + "</p>");
</script>
Screen對(duì)象
Screen對(duì)象表示用戶的屏幕相關(guān)信息
如果是在臺(tái)式電腦上躺涝，通吵辏看到的可用區(qū)域的高度會(huì)比屏幕高度小一點(diǎn)，因?yàn)橛腥蝿?wù)欄的存在。
<html>
<body>
<script type="text/javascript">
document.write("用戶的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("可用區(qū)域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
</script>
</body>
</html>
History
History用于記錄訪問歷史
- 返回上一次的訪問
<script>
function goBack()
{
history.back();
}
</script>
<button onclick="goBack()">返回</button>
- 返回上n次的訪問
<script>
function goBack()
{
history.go(-2); //-1表示上次夯膀，-2表示上上次诗充，以次類推
}
</script>
<button onclick="goBack()">返回上上次</button>
Location對(duì)象
- 刷新當(dāng)前頁(yè)面
reload方法刷新當(dāng)前頁(yè)面
<span>當(dāng)前時(shí)間:</span>
<script>
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.write(":");
document.write(d.getMilliseconds());
function refresh(){
location.reload();
}
</script>
<button onclick="refresh()">刷新當(dāng)前頁(yè)面</button>
- 跳轉(zhuǎn)到另一個(gè)頁(yè)面
<script>
function jump(){
//方法1
//location="/";
//方法2
location.assign("/");
}
</script>
<button onclick="jump()">跳轉(zhuǎn)到首頁(yè)</button>
- Location的其他屬性
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p("協(xié)議 location.protocol:"+location.protocol);
p("主機(jī)名 location.hostname:"+location.hostname);
p("端口號(hào) (默認(rèn)是80，沒有即表示80端口)location.port:"+location.port);
p("主機(jī)加端口號(hào) location.host:"+location.host);
p("訪問的路徑 location.pathname:"+location.pathname);
p("錨點(diǎn) location.hash:"+location.hash);
p("參數(shù)列表 location.search"+location.search);
</script>
彈出框
- 警告框 alert
<script>
function register(){
alert("注冊(cè)成功");
}
</script>
<button onclick="register()">注冊(cè)</button>
- 確認(rèn)框 confirm
確認(rèn)框 confirm诱建，常用于危險(xiǎn)性操作的確認(rèn)提示其障。 比如刪除一條記錄的時(shí)候，彈出確認(rèn)框
confirm返回基本類型的Boolean true或者false
<script>
function del(){
var d = confirm("是否要?jiǎng)h除");
alert(typeof d + " " + d);
}
</script>
<button onclick="del()">刪除</button>
- 輸入框 prompt
輸入框 prompt涂佃，用于彈出一個(gè)輸入框，供用戶輸入相關(guān)信息蜈敢。 因?yàn)閺棾龅慕缑娌⒉缓每垂架苡锌赡芎途W(wǎng)站的風(fēng)格不一致，所以很少會(huì)在實(shí)際工作中用到抓狭。
<script>
function p(){
var name = prompt("請(qǐng)輸入用戶名:");
alert("您輸入的用戶名是:" + name);
}
</script>
<button onclick="p()">請(qǐng)輸入用戶名</button>
計(jì)時(shí)器
- setTimeout 只執(zhí)行一次
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
function showTimeIn3Seconds(){
setTimeout(printTime,3000);
}
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">點(diǎn)擊后3秒鐘后顯示當(dāng)前時(shí)間伯病，并且只顯示一次</button>
- setInterval 不停地重復(fù)執(zhí)行
<p>每隔1秒鐘，打印當(dāng)前時(shí)間</p>
<div id="time"></div>
<script>
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
}
var t = setInterval(printTime,1000);
</script>
<br><br>
- clearInterval 終止重復(fù)執(zhí)行
通過clearInterval終止一個(gè)不斷重復(fù)的任務(wù)
本例否过，當(dāng)秒是5的倍數(shù)的時(shí)候午笛，就停止執(zhí)行
<p>每隔1秒鐘，打印當(dāng)前時(shí)間</p>
<div id="time"></div>
<script>
var t = setInterval(printTime,1000);
function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
if(s%5==0)
clearInterval(t);
}
</script>
<br>
