如何向JS脚本传递参数？怎样在HTML中为script标签定义并传值

方法1：直接读取script标签自定义属性 #

这是最贴合你示例需求的实现方式，直接通过API获取当前script标签的属性值即可：

• 普通非module类型脚本可以直接用document.currentScript拿到当前执行的script节点：

// app.js （非module）
const currentScript = document.currentScript
const myParam = currentScript.getAttribute('myparameter')
console.log(myParam) // 输出 myvalue

• type="module"类型的脚本不支持document.currentScript，改用选择器匹配即可：

// app.js （module类型）
const currentScript = document.querySelector('script[src="app.js"]')
const myParam = currentScript.getAttribute('myparameter')
console.log(myParam) // 输出 myvalue

注意：如果页面存在多个引入同路径js的script标签，建议给对应script标签加唯一id属性，用#id选择器匹配可以避免取错参数。

方法2：使用标准data-*自定义属性（更推荐） #

直接自定义非标准属性可能和未来原生HTML属性冲突，更推荐使用HTML规范支持的data-*格式自定义属性：

<script src="app.js" data-myparameter="myvalue" type="module"></script>

JS可以直接通过dataset对象读取，不需要调用getAttribute：

// 普通脚本取值
const myParam = document.currentScript.dataset.myparameter
// module脚本取值
const myParam = document.querySelector('script[src="app.js"]').dataset.myparameter

方法3：URL查询字符串传参 #

无需自定义任何标签属性，直接把参数拼接在js文件的src地址后面即可：

<script src="app.js?myparameter=myvalue" type="module"></script>

JS里解析地址的查询参数即可取值：

// 普通脚本取src
const scriptSrc = document.currentScript.src
// module脚本取src
const scriptSrc = document.querySelector('script[src^="app.js"]').src

const urlParams = new URL(scriptSrc).searchParams
const myParam = urlParams.get('myparameter')
console.log(myParam) // 输出 myvalue

方法4：全局变量传参 #

参数较少的场景也可以提前在全局作用域挂载参数，脚本直接读取即可：

<script>
window.myparameter = 'myvalue'
</script>
<script src="app.js" type="module"></script>

// app.js内直接读取
console.log(window.myparameter) // 输出 myvalue

注意：该方法会污染全局作用域，参数较多时不推荐使用。

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