正文

掌握JS获取上一个页面URL参数的小技巧

/0 浏览量
0714

在Web开发中，获取URL参数是一项常见的操作，特别是在处理表单提交、页面跳转等场景时。JavaScript为我们提供了多种方法来获取URL参数。以下是一些简单而有效的小技巧，帮助你轻松掌握如何在JavaScript中获取上一个页面的URL参数。

1. 使用window.location.search获取查询字符串

window.location.search属性返回当前页面的URL的查询字符串部分。你可以通过解析这个字符串来获取参数。

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

// 使用示例
var userId = getQueryParam('userId');
console.log(userId); // 输出参数值

2. 利用URLSearchParams对象

现代浏览器提供了URLSearchParams对象，它允许你方便地操作URL的查询字符串。

function getQueryParam(param) {
  var url = new URLSearchParams(window.location.search);
  return url.get(param);
}

// 使用示例
var userId = getQueryParam('userId');
console.log(userId); // 输出参数值

3. 获取上一个页面的URL参数

如果你需要获取上一个页面的URL参数，可以使用history对象中的go方法配合window.location.search。

function getPreviousQueryParam(param) {
  history.go(-1); // 回退到上一个页面
  var queryString = window.location.search.substring(1);
  var params = queryString.split('&');
  var value = null;
  for (var i = 0; i < params.length; i++) {
    var pair = params[i].split('=');
    if (pair[0] == param) {
      value = decodeURIComponent(pair[1]);
      break;
    }
  }
  history.go(1); // 回到当前页面
  return value;
}

// 使用示例
var userId = getPreviousQueryParam('userId');
console.log(userId); // 输出参数值

注意事项

  • 在解析查询字符串时，记得对参数值进行解码，以避免特殊字符导致的错误。
  • 使用URLSearchParams对象比直接操作字符串更安全、更易读。
  • 在获取上一个页面的URL参数时，使用history.go方法可以避免在浏览器地址栏留下痕迹。

通过以上技巧，你可以轻松地在JavaScript中获取URL参数，为你的Web开发工作带来便利。

-- 展开阅读全文 --