WordPress中添加多段相同HTML Canvas代码段冲突问题求助

问题场景 #

在WordPress中通过WPCode或Insert HTML Snippet插件插入两段相同的Canvas代码段后，页面仅显示两个按钮和一个Canvas，两段代码互相干扰，单独插入任意一段都能正常运行。

问题根源 #

1. 重复ID冲突：两段代码里的Canvas都使用了canvas这个相同ID，DOM中ID必须唯一，浏览器只会找到第一个匹配的元素，导致第二个Canvas无法被正确获取。
2. 全局变量/函数覆盖：init函数、canvas变量都是全局作用域，第二段代码的全局变量会直接覆盖第一段的，同时多次绑定window.onload也会导致只有最后一次绑定生效。

解决方法 #

1. 给每个组件设置唯一ID

每个Canvas和按钮都用不同的ID，比如canvas-1、btn-1和canvas-2、btn-2，避免ID重复。

2. 用局部作用域隔离代码逻辑

使用**立即执行函数表达式（IIFE）**把每个代码段的逻辑包裹起来，让变量和函数只在当前代码段的局部作用域内生效，不会污染全局环境或被其他代码覆盖。

3. 独立处理页面加载事件

不要依赖全局的window.onload（多次绑定会覆盖），每个代码段自己判断页面加载状态，完成后执行自身的初始化逻辑。

修改后的代码示例 #

第一段代码（可插入任意WordPress区块）

<script>
(function() {
    // 局部作用域内的唯一ID
    const canvasId = 'canvas-1';

    function init() {
        const canvas = document.getElementById(canvasId);
        draw(canvas);
    }

    // 保留你的绘图逻辑，这里是示例
    function draw(canvas) {
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#ff4444';
        ctx.fillRect(20, 20, 80, 80);
    }

    // 确保页面加载完成后执行初始化
    if (document.readyState === 'complete') {
        init();
    } else {
        window.addEventListener('DOMContentLoaded', init);
    }
})();
</script>

<canvas id="canvas-1" width="500" height="400"></canvas><br>
<button type="button">Button 1</button>

第二段代码（插入另一个区块）

<script>
(function() {
    const canvasId = 'canvas-2';

    function init() {
        const canvas = document.getElementById(canvasId);
        draw(canvas);
    }

    function draw(canvas) {
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = '#4488ff';
        ctx.fillRect(20, 20, 80, 80);
    }

    if (document.readyState === 'complete') {
        init();
    } else {
        window.addEventListener('DOMContentLoaded', init);
    }
})();
</script>

<canvas id="canvas-2" width="500" height="400"></canvas><br>
<button type="button">Button 2</button>

效果说明 #

修改后每个Canvas组件的逻辑完全独立，ID唯一、作用域隔离，插入到WordPress的不同区块后可以各自正常运行，不会再出现互相干扰的情况。

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