window.location href

window.location.href简介

window.location.href 是一个JavaScript属性，它表示当前浏览器窗口的URL，通过修改 window.location.href 的值，可以实现页面跳转，在前端开发中，经常会用到这个属性来实现动态输出跳转。

window.location.href的基本用法

1、获取当前页面的URL:

var currentUrl = window.location.href;
console.log(currentUrl);

2、跳转到指定的URL:

window.location.href = "https://www.example.com";

3、带参数跳转：

var urlParams = "?name=张三&age=18";
window.location.href = "https://www.example.com" + urlParams;

window.location.href的高级用法

1、判断是否为同一域名：

function isSameDomain() {
  var currentUrl = window.location.href;
  var newUrl = "https://www.example2.com";
  return currentUrl.indexOf(newUrl) !== -1 && newUrl.split(".")[0] === currentUrl.split(".")[0];
}

2、获取URL中的参数：

function getUrlParams() {
  var params = {};
  var queryString = window.location.search.substring(1);
  var pairs = queryString.split('&');
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
  }
  return params;
}

相关问题与解答

1、如何实现页面跳转时保留用户输入的数据？

答：可以使用表单提交的方式，将用户输入的数据一起发送到目标页面，在目标页面中，使用 window.location.search 可以获取到这些数据，在源页面中，可以将表单的 action 属性设置为目标页面的URL,同时设置 method 为 "GET"，这样，当用户提交表单时，浏览器会自动将数据附加到URL中，在目标页面中，可以通过解析 window.location.search 获取到这些数据，示例代码如下：

<form action="https://www.example2.com" method="get">
  <input type="text" name="username" /><br />
  <input type="password" name="password" /><br />
  <input type="submit" value="登录" />
</form>

2、如何实现页面跳转时清空用户输入的数据？

答：可以在跳转前先将表单中的所有输入框的值设置为空，然后再进行跳转，示例代码如下：

function redirectToAnotherPage() {
  document.querySelector('form').reset(); // 将表单中的所有输入框的值设置为空
  window.location.href = "https://www.example2.com"; // 跳转到目标页面
}

3、如何实现页面跳转时不触发浏览器的默认行为(如刷新页面)?

答：可以在 window.location.href 后面加上一个随机数或时间戳，作为URL参数，这样，浏览器会认为这是一个新的URL,从而不会触发默认行为，示例代码如下：

function redirectToAnotherPage() {
  var timestamp = Date.now(); // 生成当前时间戳作为参数
  window.location.href = "https://www.example2.com?ts=" + timestamp; // 跳转到目标页面，并携带时间戳参数
}