Layui 框架下 Unity WebGL Tab 切换黑屏问题解决方案
在 Web 应用中集成 Unity WebGL 内容时,如果将其嵌入到 Layui 的 Tab 组件中,经常会出现一个棘手的问题:切换 Tab 后画面变黑,只有点击黑屏区域才能恢复显示。

这通常是因为 Unity 渲染在 Tab 切换时被暂停,或者 Canvas 失去了焦点。要解决这个问题,核心在于监听 Tab 切换事件,并在切换完成后强制让包含 Unity 渲染的 Canvas 重新获得焦点。
问题根源
Unity WebGL 的渲染循环依赖于浏览器的上下文状态。当 Tab 被隐藏时,浏览器可能会暂停其渲染以节省资源。虽然 Layui 的 Tab 切换机制会触发 DOM 变化,但默认情况下不会自动唤醒 Canvas 的焦点,导致渲染层'休眠'。
解决方案
我们需要利用 Layui 的 element 模块监听 Tab 切换事件。一旦检测到用户切换到包含 Unity 内容的 Tab,就通过 JavaScript 访问该 Tab 内的 iframe,找到 Unity 的 canvas 元素并调用 focus() 方法。
具体实现如下:
layui.use(['element'], function() {
var element = layui.element;
// 监听 Tab 切换事件
element.on('tab(xbs_tab)', function(data) {
// 获取当前选中的 tab 索引
var activeTabId = data.index;
// 根据索引定位对应的 iframe 容器
// 注意:这里的 .x-iframe 类名需与实际页面结构保持一致
var iframe = $('.x-iframe').eq(activeTabId);
// 尝试获取 iframe 内部的 Unity canvas 元素
var unityCanvas = iframe.contents().find('#unity-canvas')[0];
// 如果找到元素,强制获取焦点以唤醒渲染
if (unityCanvas) {
unityCanvas.focus();
}
});
});


