如何在JavaScript中获取加载当前脚本的URL的查询参数？

要实现类似C语言argc/argv的效果，直接获取当前加载的JS文件自身URL的查询参数，步骤很简单：

核心思路 #

1. 拿到当前正在执行的<script>元素，提取它的src属性（也就是当前JS文件的完整URL）
2. 解析这个URL里的查询参数

具体实现 #

HTML部分（引入JS时携带查询参数） #

<script src="your-script.js?foo=bar&debug=true"></script>

JS文件内部（your-script.js） #

// 获取当前正在执行的script元素
const currentScript = document.currentScript;
// 基于script的src创建URL对象
const scriptUrl = new URL(currentScript.src);
// 用URLSearchParams解析查询参数
const params = new URLSearchParams(scriptUrl.search);

// 获取单个参数的值
const fooValue = params.get('foo'); // 结果为 "bar"
const debugMode = params.get('debug') === 'true'; // 结果为 true

// 遍历所有查询参数
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

兼容性备选方案 #

document.currentScript在Chrome、Firefox、Edge等现代浏览器中都支持，如果需要兼容IE这类旧浏览器，可以通过遍历页面所有<script>元素来定位当前脚本：

let scriptUrl;
const scripts = document.getElementsByTagName('script');
for (let i = 0; i < scripts.length; i++) {
  const src = scripts[i].src;
  // 根据脚本文件名特征匹配，比如包含your-script.js
  if (src.includes('your-script.js')) {
    scriptUrl = src;
    break;
  }
}
// 后续解析逻辑和之前一致
const params = new URLSearchParams(new URL(scriptUrl).search);

这种方法完全独立于外部页面的其他逻辑，能直接获取当前JS文件自身URL中的查询参数。

内容的提问来源于stack exchange，提问作者Goran W