BOM · 前端小册

[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 重新加载 ```