[TOC] # BOM BOM 是 browser object model 的縮寫， 簡稱瀏覽器對象模型。 BOM 提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網頁內容無關。包含以下幾個對象： * Window JavaScript 層級中的頂層對象， 表示瀏覽器窗口。 * Navigator 包含客戶端瀏覽器的信息。 * History 包含了瀏覽器窗口訪問過的 URL。 * Location 包含了當前 URL 的信息。 * Screen 包含客戶端顯示屏的信息。 具體屬性可以參考 [這篇文章](https://github.com/huyaocode/webKnowledge/blob/master/JS%E5%9F%BA%E7%A1%80/BOM.md) # location 對象 Location 對象包含有關當前 URL 的信息。 location 對象是很特別的一個對象，因為它既是 window 對象的屬性，也是 document 對象的屬性；換句話說，window.location 和 document.location 引用的是同一個對象。 | 屬性 | 描述 | | --- | --- | | hash | 設置或返回從井號 (#) 開始的 URL（錨） 。 | | host | 設置或返回主機名和當前 URL 的端口號。 | | hostname | 設置或返回當前 URL 的主機名。 | | href | 設置或返回完整的 URL。 | | pathname | 設置或返回當前 URL 的路徑部分。 | | port | 設置或返回當前 URL 的端口號。 | | protocol | 設置或返回當前 URL 的協議。 | | search | 置或返回從問號 (?) 開始的 URL（查詢部分） 。 | ## 查詢字符串參數 ``` function getQueryStringArgs () { // 取得查詢字符串并去掉開頭的問號 location.search 返回從 ? 開始的 URL let qs = location.search.length > 0 ? location.search.substring(1) : "" // 保存數據的對象 const args = {} let items = qs.length ? qs.split('&') : [] // ?q=javascript&num=10 -> ['q=javascript', 'num=10'] let name, value, item for (let i = 0, len = items.length; i < len; i++) { item = items[i].split('=') // 'q=javascript' -> ['q', 'javascript'] name = item[0] value = item[1] if (name.length) { args[name] = value } } return args } ``` 然后可以這么使用 ``` // 假設查詢字符串是?q=javascript&num=10 var args = getQueryStringArgs() alert(args["q"]) // "javascript" alert(args["num"]); // "10" ``` 當然還有很多方案，比如使用`URLSearchParams`，這個接口定義了一些處理 URL 查詢字符串的方法，具體可參考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams)，目前不支持 IE 瀏覽器。 其使用如下： ```js var paramsString = "q=URLUtils.searchParams&topic=api" var searchParams = new URLSearchParams(paramsString) // 返回一個 URLSearchParams 對象 for (let p of searchParams) { console.log(p) } searchParams.has("topic") === true // true searchParams.get("topic") === "api" // true searchParams.getAll("topic") // ["api"] searchParams.get("foo") === "" // true searchParams.append("topic", "webdev") searchParams.toString() // "q=URLUtils.searchParams&topic=api&topic=webdev" searchParams.set("topic", "More webdev") searchParams.toString() // "q=URLUtils.searchParams&topic=More+webdev" searchParams.delete("topic") searchParams.toString() // "q=URLUtils.searchParams" ``` ## 位置操作 | 方法 | 描述 | | --- | --- | | assign() | 加載新的文檔。 | | reload(‘force’) | 重新加載當前文檔。參數可選，不填或填 false 則取瀏覽器緩存的文檔 | | replace() | 用新的文檔替換當前文檔。 | 可以用上面的方法，如 `location.assign("http://www.wrox.com");` 也可以直接更改 location 對象的屬性，如上面的代碼與下面兩行是等價的 ```js window.location = "http://www.wrox.com"; location.href = "http://www.wrox.com"; ``` ```js // 假設初始 URL 為 http://www.wrox.com/WileyCDA/ //將 URL 修改為"http://www.wrox.com/WileyCDA/#section1" location.hash = "#section1"; //將 URL 修改為"http://www.wrox.com/WileyCDA/?q=javascript" location.search = "?q=javascript"; //將 URL 修改為"http://www.yahoo.com/WileyCDA/" location.hostname = "www.yahoo.com"; //將 URL 修改為"http://www.yahoo.com/mydir/" location.pathname = "mydir"; //將 URL 修改為"http://www.yahoo.com:8080/WileyCDA/" location.port = 8080; 每次修改 location 的屬性（hash 除外），頁面都會以新 URL 重新加載 ```