AJAX 加载 HTML 片段时，其中内联的 <script> 标签不会自动执行，导致依赖 DOM 的 Canvas 绘图逻辑失效；需通过动态创建元素、延迟执行或手动评估脚本等方式确保绘图代码在元素就绪后运行。
ajax 加载 html 片段时，其中内联的 `<script>` 标签不会自动执行，导致依赖 dom 的 canvas 绘图逻辑失效；需通过动态创建元素、延迟执行或手动评估脚本等方式确保绘图代码在元素就绪后运行。</script>
在使用 AJAX（如原生 XMLHttpRequest）动态注入包含 <canvas> 和初始化脚本的 HTML 内容时，一个常见却易被忽视的问题是：浏览器不会执行通过 innerHTML 插入的 <script> 标签中的 JavaScript 代码。这正是你遇到“Canvas 显示为空”现象的根本原因——尽管 <canvas id="statsID123"> 已成功写入 DOM，但紧随其后的 <script>funStats(...)</script> 被完全忽略，函数从未调用。
✅ 正确做法：分离结构与行为，确保脚本在元素就绪后执行
最推荐、最健壮的方案是 避免在 PHP 返回的 HTML 中混写内联脚本，改为由主页面统一接管绘制逻辑。具体步骤如下：
-
PHP 返回纯净 HTML 结构（不含 <script>）
// search.php 中仅输出： echo "<canvas id='statsID{$id}' data-hp='{$hp}' data-att='{$att}' data-spa='{$spa}' data-def='{$def}' data-spd='{$spd}' data-spe='{$spe}'></canvas>"; -
AJAX 成功回调中，批量查找并初始化所有新 Canvas
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { const resultsDiv = document.getElementById('results'); resultsDiv.innerHTML = xmlhttp.responseText; // 查找所有新插入的 canvas 并绘制 const newCanvases = resultsDiv.querySelectorAll('canvas[id^="statsID"]'); newCanvases.forEach(canvas => { const hp = parseInt(canvas.dataset.hp, 10); const att = parseInt(canvas.dataset.att, 10); const spa = parseInt(canvas.dataset.spa, 10); const def = parseInt(canvas.dataset.def, 10); const spd = parseInt(canvas.dataset.spd, 10); const spe = parseInt(canvas.dataset.spe, 10); funStats(canvas.id, hp, att, spa, def, spd, spe); }); } }; -
优化 funStats()：复用单个 2D 上下文，提升性能与可维护性
原函数为每个属性重复获取 getContext('2d') 并多次调用 beginPath()，既冗余又易出错。改进如下：function funStats(id, hp, att, spa, def, spd, spe) { const canvas = document.getElementById(id); if (!canvas) return; const ctx = canvas.getContext('2d'); canvas.width = 60; canvas.height = 60; const centerX = canvas.width / 2; const centerY = canvas.height / 2; const startAngle = 1.5 * Math.PI; const maxVal = 256 / 2; // 归一化基准 // 定义各环参数：[半径, 颜色, 值] const rings = [ [28, '#42af4f', hp], [24, '#d4bb49', att], [20, '#4a95ca', spa], [16, '#cc6a14', def], [12, '#8e55d3', spd], [8, '#ce58b0', spe] ]; rings.forEach(([radius, color, value]) => { const endAngle = ((value / maxVal) + 1.5) * Math.PI; ctx.beginPath(); ctx.arc(centerX, centerY, radius, startAngle, endAngle, false); ctx.lineWidth = 2; ctx.strokeStyle = color; ctx.stroke(); }); }
⚠️ 注意事项与替代方案
- 不推荐 eval() 或 new Function() 执行内联脚本：存在严重 XSS 风险，且违背安全最佳实践。
- 避免 document.write() 或 document.body.appendChild() 动态创建 canvas（如答案所提）：该方式将 canvas 插入到 <body> 底部，脱离原有布局上下文，破坏 DOM 结构预期，且难以定位样式与交互。
-
若必须保留内联脚本结构（不推荐），可手动提取并执行：
// 在 innerHTML 后解析 script 标签（仅作技术参考，勿用于生产） const tempDiv = document.createElement('div'); tempDiv.innerHTML = xmlhttp.responseText; const scripts = tempDiv.querySelectorAll('script'); scripts.forEach(script => { if (script.textContent) { try { eval(script.textContent); } catch (e) { console.error(e); } } }); resultsDiv.appendChild(tempDiv);但此方案脆弱、不可靠，且无法解决跨域或 CSP 限制问题。
✅ 总结
根本解法在于 职责分离：PHP 只负责输出语义化 HTML（含数据属性），JavaScript 负责响应式初始化。这样既符合前端工程规范，又规避了 innerHTML 的脚本执行限制，同时提升代码可测试性与可维护性。务必确保 funStats() 调用发生在对应 <canvas> 元素已真实挂载至 DOM 之后——利用 querySelectorAll 精准定位新节点，是最稳妥的实践。
