如何动态修改 script 标签中定义的全局变量数据-js教程-PHP中文网

如何动态修改 script 标签中定义的全局变量数据

本文详解如何在不重新解析 script 标签的前提下，真正更新 JavaScript 全局变量（如 data）的值，避免仅修改 innerHTML 导致变量未生效的问题。

本文详解如何在不重新解析 script 标签的前提下，真正更新 javascript 全局变量（如 `data`）的值，避免仅修改 innerhtml 导致变量未生效的问题。

在 HTML 中通过 <script id="datas"> 定义的变量（如 data = { key: "ABCDEFG", balance: "100" };）会在页面加载时立即执行并挂载为全局对象（window.data）。此时，data 已是一个可直接访问和修改的 JavaScript 对象——<strong>它不是静态文本，而是运行时内存中的引用。</script>

你原代码中使用 document.getElementById("datas").innerHTML = ... 的方式，看似“修改了脚本内容”，但实际上：

✅ 更新了 DOM 中 <script> 标签的文本内容；</script>
❌ 并未重新执行该脚本，因此 data 对象本身未被覆盖或重赋值；
❌ 后续 alert(data.key) 仍读取的是初始创建的 data 对象，而非新字符串。

✅ 正确做法是：直接操作已存在的变量引用，而非试图重写 script 标签内容。

协和·太初

协和·太初是一款面向罕见病辅助诊疗的医学 AI 大模型。

下载

✅ 推荐方案：直接修改对象属性（推荐、安全、高效）

<script id="datas">
  data = {
    key: "ABCDEFG",
    balance: "100"
  };
</script><script>
  document.getElementById("loadData").addEventListener("click", function () {
    alert(data.key); // 输出 "ABCDEFG"
  });

  document.getElementById("change").addEventListener("click", function () {
    // 直接修改全局 data 对象的属性
    data.key = "BCSD123";
    data.balance = "200";

    alert(data.key); // 现在输出 "BCSD123" ✅
  });
</script>

? 原理说明：data 是全局作用域下的可变对象引用，JavaScript 引用类型（Object）支持就地修改（mutate），无需重新声明或执行 script。

⚠️ 注意事项

不要依赖 innerHTML 修改 script 内容来“更新变量”：DOM 操作不会触发脚本重执行，且存在 XSS 风险（若插入不可信内容）。
确保变量已声明且可访问：data 必须在事件监听器执行前已被定义（即 <script id="datas"> 在监听器 script 之前加载）。</script>
如需完全替换对象，可使用 data = { key: "newKey", balance: "newBal" };，但需注意这会丢弃原对象引用（旧引用失效）。
模块化建议（进阶）：长期项目中，推荐改用 ES 模块或状态管理（如 const store = { data: {...} }），避免污染全局命名空间。