js window.location

JavaScript 是一种强大的客户端脚本语言，用于创建交互式的网页。在 JavaScript 中，window.location 是一个常用的对象，它用于获取或设置当前窗口的 URL。window.location对象是 window 对象的一部分，window 对象表示的是浏览器中的窗口。window.location 提供了各种属性和方法，能够让开发者方便地获取 URL 的各个部分，或是进行页面重定向。

window.location 属性

1. window.location.href

   • href 属性是 window.location 中最常用的属性。它代表当前页面的完整 URL。
   • 通过设置 window.location.href 可以进行页面跳转。例如：window.location.href = "https://www.example.com"; 这行代码会将用户重定向到 https://www.example.com。

2. window.location.protocol

   • 这个属性返回当前 URL 的协议部分，比如 http: 或 https:。
   • 这是非常有用的，因为你可以检查协议来决定是否进行某些特定的操作。

3. window.location.host

   • 返回当前 URL 的域名部分以及端口号（如果有）。
   • 例如，对于 URL https://www.example.com:8080/page.html， window.location.host 返回 "www.example.com:8080"。

4. window.location.hostname

   • 返回当前 URL 的域名部分，不包括端口号。
   • 比如上面的例子中，window.location.hostname 返回 "www.example.com"。

5. window.location.port

   • 获取当前 URL 的端口号，如果 URL 中没有显式指定端口号，则返回空字符串。
   • 如 http://www.example.com:8080，这里 window.location.port 返回 "8080"。

6. window.location.pathname

   • 返回 URL 中的路径部分，从主机名之后开始，查询字符串之前结束。
   • 例如，https://www.example.com/pages/home.html?query=123 中，window.location.pathname 返回 "/pages/home.html"。

7. window.location.search

   • 返回 URL 中的查询字符串部分（即 ? 之后的部分），包括问号。
   • 对于 https://www.example.com/index.html?search=query&other=123，window.location.search 返回 "?search=query&other=123"。

8. window.location.hash

   • 返回 URL 中的片段标识符部分，即 # 后面的内容。
   • 例如 http://www.example.com/index.html#section1，window.location.hash 返回 "#section1"。

window.location 方法

1. window.location.assign(url)

   • 该方法用于加载新的文档，类似于设置 window.location.href。
   • 例如，window.location.assign("https://www.example.com") 会将当前页面重定向到 https://www.example.com。

2. window.location.replace(url)

   • 和 assign 类似，但是不会在浏览历史中生成新记录。
   • 这意味着用户无法通过后退按钮返回前一个页面。使用方式为：window.location.replace("https://www.example.com")。

3. window.location.reload()

   • 重新加载当前页面，相当于刷新页面。
   • 可以传递一个布尔参数 true，强制从服务器重新加载页面，而不是从缓存中加载，比如 window.location.reload(true)。

window.location 的应用场景

1. 页面重定向

   • 常用于在用户登录后，重定向到用户主页。
   • 或根据用户权限，重定向到不同的页面。

2. 页面刷新

   • 用于在某种事件发生后，刷新页面以获取*的数据。
   • 通过 window.location.reload() 方法，可以轻松实现。

3. 解析 URL

   • 通过各种属性获取 URL 的不同部分，比如协议、主机名、路径、查询参数等。
   • 这对于在浏览器中处理不同的 URL 是非常有帮助的。

4. 构建动态 URL

   • 可根据用户输入或其他条件，动态构建 URL 进行跳转。

注意事项

• 使用 window.location 进行跳转和重定向操作时，应确保 URL 的合法性，以避免重定向到不安全的页面。
• window.location 操作可能会影响用户的体验，比如使用 replace 方法后用户不能返回到前一页面。
• 在单页面应用程序（SPA）中，可能很少使用这个对象进行导航，而是使用前端路由系统来管理 URL。

通过掌握 window.location，开发者可以更好地控制网页的导航和 URL 操作。