Layui 框架下 Unity WebGL 嵌入 Tab 切换黑屏问题
在 Web 开发中集成 Unity WebGL 内容时,常会遇到一个棘手的问题:当 Unity 渲染画面被嵌入到 Layui 的 Tab 组件中后,用户切换标签页,Unity 画面会瞬间变黑。通常需要点击黑屏区域才能恢复显示。

这通常是因为浏览器为了节省资源,在 Tab 失去焦点或隐藏时会暂停 Canvas 的渲染循环。要解决这个问题,核心在于监听 Tab 切换事件,并在激活包含 Unity 的 Tab 时,强制让 Canvas 元素重新获得焦点。
解决思路
- 监听事件:利用 Layui 的
element模块监听 Tab 切换。 - 获取元素:定位当前 Tab 对应的 iframe 及内部的 Unity canvas。
- 触发焦点:调用 JavaScript 的
focus()方法唤醒渲染。
代码实现
我们需要在页面加载完成后初始化 Layui 的 element 模块,并绑定 tab 切换回调。
layui.use(['element'], function() {
var element = layui.element;
// 监听 Tab 切换事件,注意这里的 'xbs_tab' 需替换为你实际使用的 Tab 实例名称
element.on('tab(xbs_tab)', function(data) {
// 获取当前选中的 Tab 索引
var activeTabId = data.index;
// 根据索引找到对应的 iframe 容器
// 假设你的 iframe 类名为 x-iframe,请根据实际情况调整选择器
var iframe = $('.x-iframe').eq(activeTabId);
if (iframe.length > 0) {
// 获取 iframe 内部文档中的 Unity canvas 元素
// #unity-canvas 是 Unity WebGL 导出的默认 ID,若自定义则需修改
var unityCanvas = iframe.contents().()[];
(unityCanvas) {
unityCanvas.();
}
}
});
});


