windowlocation（使用windowlocation实现页面跳转）

使用window.location实现页面跳转

引言：

在开发网页应用程序时，经常需要实现页面之间的跳转。而在JavaScript中，可以通过window.location对象来实现页面的跳转。本文将介绍window.location对象的基本用法以及一些常见的应用场景。

一、window.location对象简介

window.location是一个包含当前页面URL信息的对象。它提供了一系列的属性和方法，用于获取和控制页面URL。

1.1 属性

1.1.1 href属性

href属性是window.location对象的一个只读属性，用于获取或设置当前页面的完整URL。例如：

  console.log(window.location.href); // 输出当前页面的完整URL
  window.location.href = \"http://www.example.com\"; // 跳转到指定URL
  

1.1.2 host属性

host属性用于获取或设置当前页面的主机名和端口号。例如：

  console.log(window.location.host); // 输出主机名和端口号
  window.location.host = \"www.example.com:8080\"; // 设置主机名和端口号
  

1.1.3 pathname属性

pathname属性用于获取或设置当前页面的路径部分。例如：

  console.log(window.location.pathname); // 输出路径部分
  window.location.pathname = \"/newpath\"; // 设置新的路径部分
  

1.1.4 search属性

search属性用于获取或设置当前页面的查询字符串部分。例如：

  console.log(window.location.search); // 输出查询字符串部分
  window.location.search = \"?key=value\"; // 设置新的查询字符串部分
  

1.1.5 protocol属性

protocol属性用于获取或设置当前页面的协议。例如：

  console.log(window.location.protocol); // 输出协议
  window.location.protocol = \"https:\"; // 设置新的协议
  

1.2 方法

1.2.1 assign()方法

assign()方法用于加载一个新的文档并将浏览器的位置设置为新文档。例如：

  window.location.assign(\"http://www.example.com\"); // 跳转到指定URL
  

1.2.2 reload()方法

reload()方法用于重新加载当前页面。如果传递了一个参数true，则会强制从服务器重新加载页面，否则将从缓存中加载页面。例如：

  window.location.reload(); // 重新加载当前页面
  window.location.reload(true); // 强制重新加载页面
  

1.2.3 replace()方法

replace()方法用于加载一个新的文档，并将浏览器的位置替换为新文档，但不会在浏览器的历史记录中生成新的记录。例如：

  window.location.replace(\"http://www.example.com\"); // 替换当前页面为指定URL
  

二、window.location的应用场景

2.1 页面跳转

使用window.location的最常见用途之一是实现页面之间的跳转。通过改变window.location.href属性，可以将用户重定向到新的页面。例如：

  function redirect() {
      window.location.href = \"http://www.example.com\";
  }
  

2.2 刷新页面

有时我们需要刷新当前页面，可以使用window.location.reload()方法来实现。例如：

  function refresh() {
      window.location.reload();
  }
  

三、结语

本文介绍了window.location对象的基本用法及常见的应用场景。通过window.location对象，我们可以方便地获取和控制页面的URL，实现页面的跳转和刷新。希望本文对大家在使用window.location时能起到一定的帮助作用。

参考资料：

[1] MDN web docs. Window.location. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location (访问日期：2022年10月10日)