BOM location 对象详解

location 对象

​通过 location 对象可以以编程方式操纵浏览器的导航系统。通过设置这个对象上的属性，可 以改变浏览器 URL 中的某一部分或全部。
location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。 这个对象独特的地方在于，它既是 window 的属性，也是 document 的属性。也就是说， window.location 和 document.location 指向同一个对象。location 对象不仅保存着当前加载文档的信息，也保存着把 URL 解析为离散片段后能够通过属性访问的信息。这些解析后的属性在下表中有详细说明（location 前缀是必需的）。

​ 假设浏览器当前加载的 URL 是 http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q= javascript#contents，location 对象的内容如下表所示。

属性	值	说明
location.hash	“#contents”	URL 散列值（井号后跟零或多个字符），如果没有则为空字符串
location.host	“www.wrox.com:80”	服务器名及端口号
location.hostname	“www.wrox.com”	服务器名
location.href	“http://www.wrox.com:80/WileyCDA/ ?q=javascript#contents”	当前加载页面的完整 URL。location 的 toString() 方法返回这个值
location.pathname	“/WileyCDA/”	URL 中的路径和（或）文件名
location.port	“80”	请求的端口。如果 URL中没有端口，则返回空字符串
location.protocol	“http:”	页面使用的协议。通常是"http:“或"https:”
location.search	“?q=javascript”	URL 的查询字符串。这个字符串以问号开头
location.username	“foouser”	域名前指定的用户名
location.password	“barpassword”	域名前指定的密码
location.origin	“http://www.wrox.com”	URL 的源地址。只读

查询字符串

​ location 的多数信息都可以通过上面的属性获取。但是 URL 中的查询字符串并不容易使用。虽然 location.search 返回了从问号开始直到 URL 末尾的所有内容，但没有办法逐个访问每个查询参数。

封装函数

下面的函数解析了查询字符串，并返回一个以每个查询参数为属性的对象：

let getQueryStringArgs = function() { 
    // 取得没有开头问号的查询字符串
    let qs = (location.search.length > 0 ? location.search.substring(1) : ""), 
        // 保存数据的对象
        args = {}; 
    // 把每个参数添加到 args 对象
    for (let item of qs.split("&").map(kv => kv.split("="))) { 
        let name = decodeURIComponent(item[0]), 
            value = decodeURIComponent(item[1]); 
        if (name.length) { 
            args[name] = value; 
        } 
    } 
    return args; 
} 

​ 这个函数首先删除了查询字符串开头的问号，当然前提是 location.search 必须有内容。解析后的参数将被保存到 args 对象，这个对象以字面量形式创建。接着，先把查询字符串按照&分割成数组， 每个元素的形式为 name=value。for 循环迭代这个数组，将每一个元素按照=分割成数组，这个数组第一项是参数名，第二项是参数值。参数名和参数值在使用 decodeURIComponent()解码后（这是因为查询字符串通常是被编码后的格式）分别保存在 name 和 value 变量中。最后，name 作为属性而 value 作为该属性的值被添加到 args 对象。这个函数可以像下面这样使用：

// 假设查询字符串为?q=javascript&num=10 
let args = getQueryStringArgs(); 
alert(args["q"]); // "javascript" 
alert(args["num"]); // "10" 

​ 现在，查询字符串中的每个参数都是返回对象的一个属性，这样使用起来就方便了。

URLSearchParams

​ URLSearchParams 提供了一组标准 API 方法，通过它们可以检查和修改查询字符串。给 URLSearchParams 构造函数传入一个查询字符串，就可以创建一个实例。这个实例上暴露了 get()、 set()和 delete()等方法，可以对查询字符串执行相应操作。下面来看一个例子：

let qs = "?q=javascript&num=10"; 
let searchParams = new URLSearchParams(qs); 
alert(searchParams.toString()); // " q=javascript&num=10" 
searchParams.has("num"); // true 
searchParams.get("num"); // 10 
searchParams.set("page", "3"); 
alert(searchParams.toString()); // " q=javascript&num=10&page=3" 
searchParams.delete("q"); 
alert(searchParams.toString()); // " num=10&page=3" 

​ 大多数支持 URLSearchParams 的浏览器也支持将 URLSearchParams 的实例用作可迭代对象：

let qs = "?q=javascript&num=10"; 
let searchParams = new URLSearchParams(qs); 
for (let param of searchParams) { 
 console.log(param); 
} 
// ["q", "javascript"] 
// ["num", "10"] 

操作地址

​ 可以通过修改 location 对象修改浏览器的地址。首先，最常见的是使用 assign()方法并传入一 个 URL，如下所示：

location.assign("http://www.wrox.com");

​ 这行代码会立即启动导航到新 URL 的操作，同时在浏览器历史记录中增加一条记录。如果给 location.href 或 window.location 设置一个 URL，也会以同一个 URL 值调用 assign()方法。比 如，下面两行代码都会执行与显式调用 assign()一样的操作：

window.location = "http://www.wrox.com";  
location.href = "http://www.wrox.com";

​ 在这 3 种修改浏览器地址的方法中，设置 location.href 是最常见的。 修改 location 对象的属性也会修改当前加载的页面。其中，hash、search、hostname、pathname 和 port 属性被设置为新值之后都会修改当前 URL，如下面的例子所示：

// 假设当前 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.somewhere.com/WileyCDA/ 
location.hostname = "www.somewhere.com"; 
// 把 URL 修改为 http://www.somewhere.com/mydir/ 
location.pathname = "mydir"; 
// 把 URL 修改为 http://www.somewhere.com:8080/WileyCDA/ 
location.port = 8080; 

​ 除了 hash 之外，只要修改 location 的一个属性，就会导致页面重新加载新 URL。

注意：修改 hash 的值会在浏览器历史中增加一条新记录。在早期的 IE 中，点击“后退” 和“前进”按钮不会更新 hash 属性，只有点击包含散列的 URL 才会更新 hash 的值。

replace()

​ 在以前面提到的方式修改 URL 之后，浏览器历史记录中就会增加相应的记录。当用户单击“后退” 按钮时，就会导航到前一个页面。如果不希望增加历史记录，可以使用 replace()方法。这个方法接收一个 URL 参数，但重新加载后不会增加历史记录。调用 replace()之后，用户不能回到前一页。比 如下面的例子：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>You won't be able to get back here</title> 
    </head> 
    <body> 
        <p>Enjoy this page for a second, because you won't be coming back here.</p> 
        <script> 
            setTimeout(() => location.replace("http://www.wrox.com/"), 1000); 
        </script> 
    </body> 
</html> 

​ 浏览器加载这个页面 1 秒之后会重定向到 www.wrox.com。此时，“后退”按钮是禁用状态，即不能返回这个示例页面，除非手动输入完整的 URL。
使用 replace()方法可以替换浏览器历史记录中当前显示的页面，并导航到新 URL。

reload()

​ 最后一个修改地址的方法是 reload()，它能重新加载当前显示的页面。调用 reload()而不传参数，页面会以最有效的方式重新加载。也就是说，如果页面自上次请求以来没有修改过，浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载，可以像下面这样给 reload()传个 true：

location.reload(); // 重新加载，可能是从缓存加载
location.reload(true); // 强制重新加载，从服务器加载

​ 脚本中位于 reload()调用之后的代码可能执行也可能不执行，这取决于网络延迟和系统资源等因素。为此，最好把 reload()作为最后一行代码。