问题现象
在 Web 应用中集成 Unity WebGL 内容时，如果将其嵌入 Layui 的 Tab 组件中，经常遇到一个棘手的问题：当用户切换 Tab 后，Unity 渲染画面会变黑，只有点击黑屏区域才会恢复显示。
这通常是因为 Tab 切换导致 Canvas 失去焦点，或者浏览器暂停了非活动标签页的渲染资源。要解决这个问题，核心思路是在 Tab 切换事件中强制让 Unity 的 Canvas 元素重新获取焦点。
实现方案
Layui 的 element 模块提供了监听 Tab 切换的接口。我们需要在切换发生时，定位到当前激活的 Tab 对应的 iframe，并找到其中的 Unity Canvas 元素调用 focus() 方法。
关键代码逻辑
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 的 element 模块后，绑定 tab(xbs_tab) 事件。当用户切换 Tab 时，通过 data.index 获取索引，利用 jQuery 选择器定位到对应的 iframe。接着进入 iframe 内部查找 ID 为 unity-canvas 的元素，一旦找到就立即执行 focus()。
注意事项与优化
在实际项目中，直接调用 focus() 有时可能因为 iframe 内容尚未完全加载而失效。如果遇到切换后仍有延迟或异常，建议增加以下处理：
