如何动态更新 script 标签中定义的全局数据对象-js教程-PHP中文网

本文讲解如何正确修改通过标签内联定义的 JavaScript 全局对象（如 data），避免仅修改 HTML 内容却未触发实际变量更新的问题，确保后续调用能获取最新值。

本文讲解如何正确修改通过 `<script>` 标签内联定义的 javascript 全局对象（如 `data`），避免仅修改 html 内容却未触发实际变量更新的问题，确保后续调用能获取最新值。</script>

在 Web 开发中，有时会将配置或初始数据直接写在 <script> 标签内（如 data = { key: "ABCDEFG", balance: "100" };），并期望通过 JavaScript 动态更新它。但需明确一个关键事实：<strong>修改 <script> 元素的 innerHTML 不会重新执行其中的代码，也不会覆盖已声明的变量——这正是你点击“Check”按钮仍弹出 "ABCDEFG" 的根本原因。</script>

你的原始代码：

<script id="datas">
data = {
    key: "ABCDEFG",
    balance: "100",
};
</script>

这段脚本在页面加载时已执行完毕，data 已作为全局变量存在于执行上下文中。后续执行 document.getElementById("datas").innerHTML = ... 只是替换了 DOM 中的文本内容，对已存在的 data 对象毫无影响。

知了zKnown

知了zKnown是一款面向信息降噪和阅读提效的 AI 个人知识助手。

下载

✅ 正确做法：直接操作 JavaScript 运行时的对象引用，而非篡改 script 标签源码。由于 data 是全局变量（未用 let/const 声明），可直接读写其属性：

document.getElementById("change").addEventListener("click", function() {
  data.key = "BCSD123";
  data.balance = "200";
  alert(data.key); // ✅ 弹出 "BCSD123"
});

⚠️ 注意事项：

确保 data 确实是全局变量（即在顶层作用域用 var 或无声明关键字定义）；若使用 const data = {...} 或模块环境，则不可重赋值，需改用可变对象（如 data.key = ...）。
避免依赖 eval() 或动态创建新 <script> 标签来“重执行”，既不安全也违背现代最佳实践。</script>
若需更健壮的数据管理，建议将 data 封装为模块、使用 class 或 Proxy，或迁移到 localStorage + 状态监听机制。

总结：DOM 操作 ≠ JS 执行。更新数据，请直击运行时对象本身——这是高效、安全且符合语言本质的解决方案。