文章目錄
1.什麼是BOM
BOM（browser object model）瀏覽器對象模型
BOM中的對象：window、navigator、screen、history、location、document、event
2.window對象
window對象是瀏覽器的一個實例，在瀏覽器中，window對象有雙重角色，它既是通過javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。
2.1 作爲全局對象
window.age=15 相當於不在任何函數體內的var age=15
window.sayHello(){
alert("Hello");
}
window.sayHello();
所有的全局變量和全局方法都可通過window對象訪問，window對象可以省略掉。
2.2 作爲js訪問瀏覽器窗口的接口
方法一：window.alert("content") 顯示帶有一段消息和一個確認按鈕的警告框。
方法二：window.confirm("message") 彈出一個確認對話框，有一個布爾型返回值。
方法三：window.prompt("text,defalutText") 彈出一個可以接受輸入的對話框，text參數爲要在對話框中顯示的純文本，defaultText參數爲默認的輸入文本。點擊“取消”返回none，點擊‘’確認”返回輸入的值。
方法四：window.open(pageURL,name,parameters) 打開一個新的瀏覽器窗口或查找一個已命名的窗口。pageURL爲子窗口路徑，name爲子窗口句柄（name聲明瞭新窗口的名稱，方便後期通過name對子窗口進行引用），parameters爲窗口參數，各參數用逗號分隔。
parameters：
方法五：window.close() 關閉當前窗口
方法六：window.setTimeout(code,millisec) 超時調用，在指定的毫秒數後調用函數或計算表達式，code爲要調用的函數或要執行的代碼串，millisec爲在執行代碼前需要等待的毫秒數。
setTimeout("alert('hello')",4000);
方法七：clearTimeout(timoutname,millisec) 取消超時調用
方法八：setInterval(code,millisec) 每隔millisec執行一次
方法九：clearInterval(id_of_setinterval) 取消間歇調用，id_of_setinterval爲由setInterval()設置的ID值，此ID值是一個對象。
3.location對象
location對象提供了當前窗口中加載的文檔的有關信息，還提供了一些導航的功能，它既是window對象的屬性，也是document對象的屬性。
3.1 location對象的屬性
location.href：返回當前加載頁面的完整URL，與window.location.href等價
location.hash：返回URL中的hash（#後跟0或多個字符串），如果不包含則返回空字符串。可以使用location.hash="#top"實現“返回頂部”的功能（頂部有一個元素的id爲top）。
location.host：返回服務器名稱和端口號
location.hostname：返回不帶端口號的服務器名稱
location.pathname：返回URL中的目錄和（或）文件名
location.port：返回端口號
location.protocol：返回頁面使用的協議
location.search：返回URL的查詢子字符串，這個字符串以？開頭
3.2 使用location對象改變瀏覽器位置
改變URL：location.href屬性、location.hash屬性、loaction.search屬性
setTimeout(function(){
location.href="https://www.google.com";
},3000);
location.replace(url)可用來重定向URL,不會在歷史記錄中生成新記錄。
loaction.reload()：重新加載當前顯示的頁面，有可能從緩存中加載（若沒有任何還變），loaction.reload(true)強制從服務器加載。
4.history對象
history對象保存了用戶在瀏覽器中訪問頁面的歷史記錄。
history.back()：相當於history.go(-1)，回到歷史記錄的上一步
history.forward()：相當於history.go(1)，回到歷史記錄的下一步
history.go(n)：回到前n步
history.go(-n)：回到後n步
5.screeen對象
常用屬性：
screen.availWidth：返回可用的屏幕寬度
screen.availHeight：返回可用的屏幕高度
6.navigator對象
常用屬性：
navigator.UserAgent：用來識別瀏覽器名稱、版本、引擎以及操作系統等信息的內容。
一個檢測用戶所使用的瀏覽器類型的小例子：
<!DOCTYPE html>
<html>
<head>
<title>判斷所使用的瀏覽器類型</title>
<script src='domReady.js'></script>
<style>
#text{
width:100%;
height:100px;
font-size: 30px;
font-weight: bold;
background-color: black;
color:white;
}
</style>
</head>
<body>
<div id='text'>
sss
</div>
<script>
//檢測瀏覽器類型
function getBrowser(){
var explorer = navigator.userAgent.toLowerCase(),browser;
if(explorer.indexOf("msie")>-1){
browser = "IE";
}else if(explorer.indexOf("opera")>-1){
browser = "oprea";
}else if(explorer.indexOf("chrome")>-1){
browser = "chrome";
}else if(explorer.indexOf("safari")>-1){
browser = "scfari";
}
return browser;
}
var explorer = getBrowser();
var text = document.getElementById("text");
text.innerText=explorer;
</script>
</body>
</body>
</html>
