location 是最有用的 BOM 对象之一,提供了当前窗口中加载文档的信息,以及通常的导航功能。

  • 这个对象独特的地方在于,它既是 window 的属性,也是 document的属性。
  • 也就是说,window.location 和 document.location 指向同一个对象。
  • location 对象不仅保存着当前加载文档的信息,也保存着把 URL 解析为离散片段后能够通过属性访问的信息。

假设浏览器当前加载的 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 的源地址。只读
  1. let getQueryStringArgs = function() {
  2. // 取得没有开头问号的查询字符串
  3. let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
  4. // 保存数据的对象
  5. args = {};
  6. // 把每个参数添加到 args 对象
  7. for (let item of qs.split("&").map(kv => kv.split("="))) {
  8. let name = decodeURIComponent(item[0]),
  9. value = decodeURIComponent(item[1]);
  10. if (name.length) {
  11. args[name] = value;
  12. }
  13. }
  14. return args;
  15. }
  • 这个函数首先删除了查询字符串开头的问号,当然前提是 location.search 必须有内容。
  • 解析后 的参数将被保存到 args 对象,这个对象以字面量形式创建。
  • 接着,先把查询字符串按照&分割成数组, 每个元素的形式为 name=value。
  • for 循环迭代这个数组,将每一个元素按照=分割成数组,
  • 这个数组 第一项是参数名,第二项是参数值。
  • 参数名和参数值在使用 decodeURIComponent()解码后(这是因为 查询字符串通常是被编码后的格式)分别保存在 name 和 value 变量中。
  • 最后,name 作为属性而 value 作为该属性的值被添加到 args 对象。


location对象的常见方法

1551322750241.png

1. assign()

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

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

这行代码会立即启动导航到新 URL 的操作,同时在浏览器历史记录中增加一条记录。如果给 location.href 或 window.location 设置一个 URL,也会以同一个 URL 值调用 assign()方法。

  1. //下面两行代码都会执行与显式调用 assign()一样的操作:
  2. window.location = "http://www.wrox.com";
  3. location.href = "http://www.wrox.com";

修改 location 对象的属性也会修改当前加载的页面。其中,hash、search、hostname、pathname 和 port 属性被设置为新值之后都会修改当前 URL

  1. // 假设当前 URL 为 http://www.wrox.com/WileyCDA/
  2. // 把 URL 修改为 http://www.wrox.com/WileyCDA/#section1
  3. location.hash = "#section1";
  4. // 把 URL 修改为 http://www.wrox.com/WileyCDA/?q=javascript
  5. location.search = "?q=javascript";
  6. // 把 URL 修改为 http://www.somewhere.com/WileyCDA/
  7. location.hostname = "www.somewhere.com";
  8. // 把 URL 修改为 http://www.somewhere.com/mydir/
  9. location.pathname = "mydir";
  10. // 把 URL 修改为 http://www.somewhere.com:8080/WileyCDA/
  11. location.port = 8080;

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

2. replace()

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>You won't be able to get back here</title>
  5. </head>
  6. <body>
  7. <p>Enjoy this page for a second, because you won't be coming back here.</p>
  8. <script>
  9. setTimeout(() => location.replace("http://www.wrox.com/"), 1000);
  10. </script>
  11. </body>
  12. </html>

浏览器加载这个页面 1 秒之后会重定向到 www.wrox.com。此时,“后退”按钮是禁用状态,即不能 返回这个示例页面,除非手动输入完整的 URL。

3. reload()

  • 它能重新加载当前显示的页面。
  • 调用 reload()而不传参 数,页面会以最有效的方式重新加载。
  • 也就是说,如果页面自上次请求以来没有修改过,浏览器可能会 从缓存中加载页面。
  • 如果想强制从服务器重新加载,可以像下面这样给 reload()传个 true:
    1. location.reload(); // 重新加载,可能是从缓存加载
    2. location.reload(true); // 重新加载,从服务器加载
    脚本中位于 reload()调用之后的代码可能执行也可能不执行,这取决于网络延迟和系统资源等因 素。为此,最好把 reload()作为最后一行代码