Layui 框架下 Unity WebGL Tab 切换黑屏解决方案
在开发 Web 应用时,如果集成了 Unity WebGL 内容,经常会遇到一个棘手的问题:当 Unity 渲染嵌入到 Layui 的 Tab 组件中时,一旦切换标签页,画面就会变黑,必须点击黑屏区域才能恢复显示。

这通常是因为 Tab 切换导致 Unity 渲染上下文被挂起,或者 Canvas 元素失去了焦点。要解决这个问题,关键在于确保每次切回包含 Unity 的 Tab 时,能强制唤醒渲染。
核心思路
利用 Layui 提供的 element 模块监听 Tab 切换事件。当用户切换标签时,通过 JavaScript 主动获取当前 Tab 内 iframe 中的 Unity canvas 元素并调用 focus() 方法,以此触发渲染恢复。
代码实现
首先需要引入 Layui 的 element 模块,并绑定 Tab 切换回调。注意这里的 xbs_tab 和 .x-iframe 需要根据你实际项目的 HTML 结构进行调整。
layui.use(['element'], function() {
var element = layui.element;
// 监听 Tab 切换事件
element.on('tab(xbs_tab)', function(data) {
// 获取当前选中的 tab 对应的 iframe
var activeTabId = data.index;
var iframe = $('.x-iframe').eq(activeTabId);
// 获取 iframe 中的 Unity canvas 元素,若存在,则主动获取焦点
var unityCanvas = iframe.contents().find('#unity-canvas')[0];
if(unityCanvas) {
unityCanvas.focus(); // 强制 Unity canvas 获取焦点
}
});
});
关键点解析
- 事件监听: 是 Layui 的标准写法,确保只在 Tab 切换时执行逻辑,避免性能浪费。


