如何在加载脚本时向其传递可被脚本访问的变量？

嘿，我来给你分享几个比meta标签更顺手的方案，完美解决你给外部脚本传密钥的需求：

1. 用URL查询参数传递（就是你理想的方式！） #

其实你一开始想的<script src="https://example.com/script.js?key=authkey"></script>完全可行，只是你不知道怎么在脚本里拿到这个参数而已。只需要在脚本里通过document.currentScript获取当前执行的脚本元素，然后解析它的URL参数就行：

页面中的脚本标签：

<script src="https://example.com/script.js?key=authkey"></script>

脚本内部的代码：

// 获取当前正在执行的脚本元素
const currentScript = document.currentScript;
// 解析URL里的查询参数
const urlParams = new URLSearchParams(currentScript.src.split('?')[1]);
const key = urlParams.get('key');

// 现在就能用这个key啦
console.log(key); // 输出 authkey

这个方法的好处是参数直接和脚本绑定，逻辑清晰，不会和页面里其他元素的配置冲突。

2. 通过全局变量传递 #

如果需要传递不止一个参数（比如还有其他配置项），用全局变量会更灵活：

页面中先定义全局配置，再加载脚本：

<script>
// 用独特的命名空间避免全局变量冲突
window.MyAppExternalConfig = {
  key: 'authkey',
  // 还能加其他配置
  timeout: 3000
};
</script>
<script src="https://example.com/script.js"></script>

脚本内部直接读取：

const key = window.MyAppExternalConfig.key;

优点是简单直观，适合多参数场景；缺点是要注意全局变量的命名，尽量用独特的前缀避免和其他脚本冲突。

3. 通过脚本元素的data属性传递 #

这种方式语义化更好，参数直接附着在脚本元素上，不会污染全局：

页面中的脚本标签：

<script src="https://example.com/script.js" data-key="authkey"></script>

脚本内部获取：

const currentScript = document.currentScript;
const key = currentScript.dataset.key;

这个方法和URL参数类似，但参数不会出现在URL里，适合不想让参数暴露在地址栏（或者脚本URL的查询参数里）的场景。

重要提醒 #

不管用哪种方式，前端传递的密钥都是可以被用户查看的，如果这个密钥是高度敏感的（比如涉及后端权限的密钥），千万不要直接在前端传递！这种情况建议通过后端代理请求，或者用其他后端验证的方式处理。

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