js怎么获取地址栏参数

原创

admin 2周前 (08-25) 阅读数 42 #Javascript

文章标签 Javascript

Javascript 获取地址栏参数全攻略

在Web开发中，常常需要从URL地址栏中获取参数，用于页面跳转后的数据传递和处理。Javascript为我们提供了多种做法来获取这些参数。以下是一些常用的方法。

使用传统做法：location对象

传统的获取URL参数的方法是使用window对象的location属性。以下是获取地址栏参数的步骤：


// 获取整个URL
var url = window.location.href;
// 或者只获取查询字符串（参数部分）
var queryString = window.location.search;

解析查询字符串参数

获取查询字符串后，通常需要解析它以得到具体的参数值。可以使用以下函数来解析：


function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}

使用ES6的URL和URLSearchParams

如果你愿望使用更现代的方法，可以使用ES6引入的URL和URLSearchParams对象：


// 创建一个URL对象
var url = new URL(window.location.href);
// 使用URLSearchParams获取所有参数
var params = new URLSearchParams(url.search);
// 获取特定的参数
var myParam = params.get('myParam');

示例代码：返回参数值

下面是一个单纯的示例，怎样在页面中使用上面的方法获取名为“param”的参数值，并将其显示在页面上：


// HTML部分
<p id="paramValue">参数值将显示在这里</p>
// Javascript部分
document.addEventListener("DOMContentLoaded", function() {
  var paramValue = getQueryVariable('param');
  document.getElementById('paramValue').textContent = paramValue ? paramValue : '参数未提供';
});