JS 浏覽器對象模型BOM（Browser Object Model ）
1. window對象
用戶端 JavaScript 頂層對象。每當
<body>
或
<frameset>
标簽出現時，window 對象就會被自動建立
1.1 全局作用域
var age = 29;
window.color = "red";
//在 IE < 9 時抛出錯誤，在其他所有浏覽器中都傳回 false
delete window.age;
//在 IE < 9 時抛出錯誤，在其他所有浏覽器中都傳回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined
使用 var 語句添加的 window 屬性有一個名為 [[Configurable]] 的特性，這個特性的值被設定為
false
，是以這樣定義的屬性不可以通過delete操作符删除。
1.2 系統對話框
- alert()
- confirm()
- prompt()
1.3 打開和關閉視窗
- window.open (URL, name, features, replace)
- window.close()
- window.closed() 關閉則傳回 true，否則傳回 false。
1.4 使用定時器
- setInterval()
- setTimeout()
- clearInterval()
- clearTimeout()
1.5 控制視窗大小和位置
- moveTo() / moveBy()
- resizeTo() / resizeBy()
- scrollTo() / scrollBy()
2. location對象
目前網頁文檔的 URL 資訊。
如：http://www.123.cn:80/news/index.asp?id=123&name=location#top
- href: 目前顯示文檔的完整 URL
- protocol: URL 的協定，包括字尾的冒号。例如：“http:”
- host: URL 中的主機名和端口。例如：“www.123.cn:80”
- hostname: URL 中的主機名。例如：“www.123.cn”
- port: URL 的端口
- pathname: URL的路徑。例如：“news/index.asp”
- search: URL 的查詢部分，包括前導問号。例如：“?id=123&name=location”
- hash: URL 中錨部分，包括前導符（#）。例如：“#top”,指定在文檔中錨記的名稱
使用 location 對象擷取 URL 中指定字元串的參數值。
function getQueryString(key) {
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r !== null) return decodeURI(r[2]); return null;
}
方法：
- reload()：可以重新裝載目前文檔。
- replace()：可以裝載一個新文檔而無須為它建立一個新的曆史記錄。
位置操作
1. window.location = "http://www.wrox.com";
2. location.href = "http://www.wrox.com";
3. location.assign("http://www.wrox.com");
如果是将 location.href或 window.location 設定為一個 URL 值，也會以該值調用
assign()
方法。
在這些改變浏覽器位置的方法中，最常用的是設定 location.href 屬性。
3. navigator對象
包含浏覽器資訊。
navigator 對象存儲了與浏覽器相關的基本資訊，如名稱、版本和系統等。通過 window.navigator 可以引用該對象，并利用它的屬性來讀取用戶端基本資訊。
3.1 浏覽器檢測方法
-
特征檢測法
特征檢測法就是根據浏覽器是否支援特定的功能來決定相應操作的方式。
if (document.getElementsByName) { //如果存在，則使用該方法擷取a元素
var a = document.getElementsByName ("a");
} else if (document.getElementsByTagName) { //如果存在，則使用該方法擷取a元素
var a = document.getElementsByTagName ("a");
}
-
字元串檢測法
用戶端浏覽器每次發送 HTTP 請求時，都會附帶有一個 user-agent（使用者代理）字元串，對于 Web 開發人員來說，可以使用使用者代理字元串檢測浏覽器類型。
var s = window.navigator.userAgent;
//簡寫方法
var s = navigator.userAgent;
console.log(s);
3.2 檢測浏覽器類型和版本号
3.3 檢測作業系統
4. screen對象
螢幕資訊。
- screen.availWidth - 可用的螢幕寬度
- screen.availHeight - 可用的螢幕高度
5. history對象
曆史記錄
5.1 屬性
- length: 曆史記錄棧中一共有多少頁
5.2 方法
- back()
- forward()
- go()
-
pushState() 添加曆史記錄條目
包含 3 個參數，簡單說明如下：
- 狀态對象。狀态對象是一個 JavaScript 對象直接量，與調用 pushState() 方法建立的新曆史記錄條目相關聯。無論何時使用者導航到新建立的狀态，popstate 事件都會被觸發，并且事件對象的 state 屬性都包含曆史記錄條目的狀态對象的拷貝。
- 标題。可以傳入一個簡短的标題，标明将要進入的狀态。FireFox 浏覽器目前忽略該參數，考慮到未來可能會對該方法進行修改，傳一個空字元串會比較安全。
- 可選參數。新的曆史記錄條目的位址。
pushState() 方法永遠不會觸發 hashchange 事件。
-
replaceState() 方法
history.replaceState() 與 history.pushState() 用法相同，都包含 3 個相同的參數。不同之處是：pushState() 是在 history 棧中添加一個新的條目，replaceState() 是替換目前的記錄值。
每當激活的曆史記錄發生變化時，都會觸發 popstate 事件,
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)