8.2 location对象

location 对象是浏览器提供的一个内置全局对象，用于获取和设置当前窗口的 URL 地址和相关信息。通过 window.location 属性可以访问 location 对象或者直接调用location对象。 location 对象包含一系列属性和方法，下面是一些常见的属性和方法： 1 href：获取或设置当前文档的完整 URL 地址，可以设置该属性来跳转到其他页面。 2 host：获取或设置 URL 的主机名和端口号。 3 hostname：获取或设置URL 的主机名，不包括端口号。 4 pathname：获取或设置 URL 的路径部分。 5 search：获取或设置 URL 的查询字符串部分。 6 hash：获取或设置 URL 的哈希部分。 7 protocol：获取或设置 URL 的协议部分，如 http、https、file 等。 8 port：获取或设置URL的端口部分，如果没有端口返回空字符串。 9 origin : 获取或设置URL的源信息，包括协议、主机名和端口号。 10 reload()：重新加载当前文档。 11 assign()：用新的 URL 地址替换当前文档。 12 replace()：用新的 URL 地址替换当前文档，并且新页面不会生成历史记录。

下面通过一个例子展示直观展示这些属性的值，页面的URL是 http://localhost:61327/75location?name=javascript#hello 对应属性的取值如下： href : "http://localhost:61327/75location?name=javascript#hello" hash: "#hello" host: "localhost:61327" hostname: "localhost" pathname: "/75location" port: "61327" protocol: "http:" search: "?name=javascript" origin: "http://localhost:61327"

注意这些属性除了获取到当前URL的属性值之外，还是可以进行设置的，除了设置hash不会让页面刷新之外，其他的属性在设置之后都会引起页面的重新刷新。如果在js中做页面跳转常常使用设置href属性，并且会在浏览器的历史记录中有记录，例如： location.href = "http://www.example.com/new-page.html"; 点击在浏览器的 “后退” 按钮，可回到上一页。

reload()

location.reload() 方法用于重新加载当前文档，即刷新当前页面。如果在方法中传递了一个参数 true，则会强制浏览器从服务器重新加载当前文档，而不是从缓存中加载。如果没有传递参数，则默认为 false，即使用浏览器缓存加载当前文档。 如果想强制浏览器从服务器重新加载当前文档，可以将 true 作为参数传递给 location.reload() 方法，例如：location.reload(true); // 强制浏览器从服务器重新加载当前文档。

replace()

location.replace() 方法用于将当前文档替换为指定的 URL 地址，并且不会在浏览器的历史记录中生成一条新的记录。也就是说，调用该方法后，无法通过单击浏览器的“后退”按钮返回到替换前的文档状态。函数签名如下： location.replace(url) 例如，下面的代码将把当前文档替换为一个新的 URL： location.replace("http://www.example.com/new-page.html"); 需要注意的是，由于调用 location.replace() 方法会替换当前文档，因此在该方法之后的代码将不会被执行，可以通过将该方法放在 setTimeout() 函数中来延迟执行，例如：

setTimeout(function() {
  location.replace("http://www.example.com/new-page.html");
}, 5000); // 5 秒钟后替换当前文档

除了在 JavaScript 中调用外，还可以通过在 HTML 中使用 meta 标签来实现文档替换的效果，例如： <meta http-equiv="refresh" content="0;url=http://www.example.com/new-page.html"> 这里的 content 属性表示在 0 秒后自动刷新并跳转到指定的 URL 地址，相当于调用了 location.replace() 方法。

assign()

location.assign() 方法用于将当前文档导航到一个新的URL，并且更新浏览器的历史记录，使得用户可以通过点击浏览器的“后退”和“前进”按钮来导航到之前访问的页面。 以下是 location.assign() 方法的使用方式和语法： location.assign(url); 其中，url 参数是一个字符串类型的参数，表示将要导航到的 URL 地址。如果 url 参数为空字符串或者与当前 URL 地址相同，则 location.assign() 方法将什么也不做。 location.assign()方法还可以通过一个包含 URL 地址的对象作为参数进行调用。例如： location.assign({href: 'https://example.com'}); 此外，location.assign() 方法也可以通过在浏览器地址栏中输入URL或者点击页面中的超链接来触发。location.assign() 方法和直接设置 location.href 之间的区别并不是很大,只是location.assign()的语义化更好一些。如果是页面上用户点击操作的页面跳转建议使用a标签，例如： <a href="https://www.example.com">跳转</a> 这样整个页面的语义化会更清楚，而且用a标签用户也可以右键选择在新的标签页中打开。