本文讲解如何正确修改通过 <script> 标签内联定义的 javascript 全局对象属性，避免仅修改 html 内容却未触发实际变量更新的问题。核心在于直接操作运行时变量，而非重写 script 标签的 innerhtml。
本文讲解如何正确修改通过 <script> 标签内联定义的 javascript 全局对象属性，避免仅修改 html 内容却未触发实际变量更新的问题。核心在于直接操作运行时变量，而非重写 script 标签的 innerhtml。
在 Web 开发中，有时会将配置或初始化数据直接写在 <script> 标签内（如 data = { key: "ABCDEFG", balance: "100" };），并期望后续通过 JavaScript 动态更新其值。但如示例所示，若仅用 element.innerHTML = ... 替换 script 标签内容，并不会重新执行脚本、也不会覆盖已声明的变量——因为浏览器不会自动解析并执行修改后的文本内容。此时 data.key 仍指向原始内存中的值，导致点击“Check”按钮时始终弹出 "ABCDEFG"。
✅ 正确做法是：直接修改已存在的全局变量属性，而非篡改 script 标签的 DOM 文本。
以下为优化后的完整实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Data Update</title>
</head>
<body>
<h1>Example</h1>
<button id="loadData">Check</button>
<button id="change">Change Data</button>
<!-- 初始化 data 对象（注意：必须在监听器前定义，确保作用域可访问） -->
<script id="datas">
window.data = {
key: "ABCDEFG",
balance: "100"
};
</script>
<script>
document.getElementById("loadData").addEventListener("click", function () {
alert(data.key); // ✅ 输出当前实际值
});
document.getElementById("change").addEventListener("click", function () {
// ✅ 直接修改运行时对象属性（推荐）
data.key = "BCSD123";
data.balance = "200";
alert(data.key); // → 弹出 "BCSD123"
});
</script>
</body>
</html>? 关键要点说明：
- window.data 显式挂载到全局对象：确保 data 在任意脚本中均可访问，避免因作用域或声明顺序导致 ReferenceError；
- 禁止使用 innerHTML 重写 script 内容：<script> 标签内容修改后不会自动 re-eval，且存在 XSS 风险（尤其当插入用户输入时）；
-
若需完全替换整个数据结构，仍应采用赋值方式：
data = { key: "NEW_KEY", balance: "300" }; // 注意：需确保 data 是可重新赋值的变量（非 const） - 进阶建议：对于复杂场景，推荐将数据封装为模块化状态管理（如使用 class 或 Proxy 实现响应式更新），或改用 JSON 配置 + fetch() 加载外部数据，提升可维护性与安全性。
总结：DOM 操作 ≠ JavaScript 执行。修改 <script> 标签文本只是改变了 HTML 源码，而真正生效的是 JS 引擎中已初始化的变量引用。要更新数据，请始终操作变量本身。
