如何在MediaWiki页面中插入HTML <canvas>元素？

背景说明 #

此前已通过「MediaWiki脚本+模板」的方式成功实现JavaScript输出Hello World：

• 在MediaWiki:Common.js写入JS代码，通过DOM操作插入内容
• 对应模板预留DOM容器，主页面调用模板触发渲染

现在需要插入<canvas>元素，直接在页面编写该标签会被MediaWiki过滤失效。尝试沿用Hello World的实现逻辑修改代码后，页面初始显示空白，但后续发现代码实际有效，只是存在约5分钟的生效延迟。

有效实现步骤 #

1. 更新MediaWiki:Common.js #

将以下代码写入站点的MediaWiki:Common.js页面：

(function () {
  // 获取模板中预留的DOM容器
  var myElement = document.getElementById('mw-Mycanvas');
  // 动态插入canvas元素
  myElement.innerHTML = '<canvas width="200" height="100" style="border:1px solid red;"></canvas>';
}());

注：无需包裹多余的<html>标签，直接插入canvas即可，减少不必要的DOM结构冗余。

2. 创建/修改模板页面 #

在Template:Mycanvas页面添加DOM容器代码：

<div id="mw-Mycanvas"></div>

3. 主页面调用模板 #

在需要显示画布的主页面中，插入模板调用代码：

{{Mycanvas}}

核心注意事项 #

• 缓存延迟问题：MediaWiki对站点脚本（如Common.js）有缓存机制，修改后不会立即生效，通常等待5分钟左右即可，也可通过「Ctrl+F5强制刷新浏览器」来加速加载最新脚本。
• 直接HTML标签失效原因：MediaWiki默认会过滤非白名单内的HTML元素，<canvas>不在默认白名单中，因此必须通过JavaScript动态插入才能正常显示。这也符合社区用户Bawolff给出的建议——要么编写扩展，要么完全通过Common.js这类脚本文件实现。

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