如何通过HTML的script标签属性向JavaScript传递数组、对象等变量？

HTML 标签的自定义属性仅会被解析为纯字符串，无法自动读取 JavaScript 全局作用域内的变量值，因此你直接在data-site属性中写入变量名myparameter，最终读取到的只会是"myparameter"字符串本身。

下面是几种适配长数组/对象传递需求的实现方案：

方案1：使用JSON类型script标签传递（推荐，适配超长数组） #

该方案不会污染全局作用域，支持任意长度的数组/对象，内容可自由换行，无需拼接属性字符串：

1. 在引入业务脚本前，新增一个type="application/json"的专用脚本标签，将需要传递的数组直接写入标签内容中：

<script type="application/json" id="custom-pass-data">
[
  "item1",
  "item2",
  // 可直接写入完整超长数组，支持任意换行
  "itemN"
]
</script>
<script src="app.js" type="module"></script>

2. 在app.js中直接读取该标签内容并反序列化即可：

const passArray = JSON.parse(document.getElementById('custom-pass-data').textContent)

方案2：全局作用域挂载传递 #

如果不需要考虑全局变量冲突，直接挂载到window对象上是最简便的方式：

1. 提前在全局定义需要传递的变量：

<script>
window.myPassArray = [/* 超长数组内容 */]
</script>
<script src="app.js" type="module"></script>

2. 在app.js中直接读取：

const passArray = window.myPassArray

如果担心全局污染，可以自定义唯一命名空间挂载，例如window.myAppConfig = { userList: [/* 数组内容 */] }，降低变量冲突概率。

方案3：动态创建script标签传递data属性 #

如果你确实需要通过data属性传递，可以动态创建script标签插入DOM，实现变量值的自动注入：

<script>
const myparameter = [/* 需要传递的数组内容 */]
const script = document.createElement('script')
script.src = 'app.js'
script.type = 'module'
// 序列化后写入data属性
script.dataset.site = JSON.stringify(myparameter)
document.body.appendChild(script)
</script>

在app.js中读取并反序列化：

// 注意：ESM模块中document.currentScript仅在脚本初始化同步执行阶段有效，异步逻辑需提前缓存
const passArray = JSON.parse(document.currentScript.dataset.site)

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