Layui 框架中 Unity WebGL Tab 切换黑屏问题的解决方案

Layui 集成 Unity WebGL 时的 Tab 切换黑屏修复

在做 Web 应用开发时，如果页面里嵌入了 Unity WebGL 内容，经常会遇到一个棘手的问题：当把 Unity 渲染放在 Layui 的 Tab 组件里，用户切换标签页后，画面直接变黑，只有点击一下才能恢复显示。这通常是因为 Tab 切换导致 Canvas 失去焦点，或者浏览器暂停了后台渲染。

核心思路其实很简单：每次切换到包含 Unity 的 Tab 时，手动触发一次焦点恢复。利用 Layui 的事件机制监听 Tab 变化，然后强制让内部的 Canvas 元素重新获得焦点，渲染就能正常跑起来。

监听 Tab 切换事件

Layui 的 element 模块提供了完善的 Tab 事件接口。我们不需要自己去写复杂的 DOM 监听，直接用 on('tab') 就能捕获切换动作。拿到当前激活的 Tab 索引后，就能定位到对应的 iframe 容器。

强制 Canvas 获取焦点

Unity WebGL 通常封装在一个 iframe 里，真正的渲染层是里面的 <canvas> 元素。当 Tab 隐藏时，这个 canvas 往往处于失焦状态。我们在切换回调里，通过 jQuery 找到 iframe 里的 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.use 确保模块加载完成，element.on 绑定事件。关键点在于 iframe.contents().find('#unity-canvas')，这里必须确保 iframe 已经加载完毕，否则拿不到内部元素。如果实际运行中发现偶尔还有延迟，可以在 focus() 前加个微小的延时，或者监听 iframe 的 事件来确保时机成熟。