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.();
}
});
});
