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

Layui 框架下 Unity WebGL 嵌入 Tab 切换黑屏问题

在 Web 开发中集成 Unity WebGL 内容时，常会遇到一个棘手的问题：当 Unity 渲染画面被嵌入到 Layui 的 Tab 组件中后，用户切换标签页，Unity 画面会瞬间变黑。通常需要点击黑屏区域才能恢复显示。

这通常是因为浏览器为了节省资源，在 Tab 失去焦点或隐藏时会暂停 Canvas 的渲染循环。要解决这个问题，核心在于监听 Tab 切换事件，并在激活包含 Unity 的 Tab 时，强制让 Canvas 元素重新获得焦点。

解决思路

1. 监听事件：利用 Layui 的 element 模块监听 Tab 切换。
2. 获取元素：定位当前 Tab 对应的 iframe 及内部的 Unity canvas。
3. 触发焦点：调用 JavaScript 的 focus() 方法唤醒渲染。

代码实现

我们需要在页面加载完成后初始化 Layui 的 element 模块，并绑定 tab 切换回调。

layui.use(['element'], function() {
    var element = layui.element;

    // 监听 Tab 切换事件，注意这里的 'xbs_tab' 需替换为你实际使用的 Tab 实例名称
    element.on('tab(xbs_tab)', function(data) {
        // 获取当前选中的 Tab 索引
        var activeTabId = data.index;
        
        // 根据索引找到对应的 iframe 容器
        // 假设你的 iframe 类名为 x-iframe，请根据实际情况调整选择器
        var iframe = $('.x-iframe').eq(activeTabId);
        
        if (iframe.length > 0) {
            // 获取 iframe 内部文档中的 Unity canvas 元素
            // #unity-canvas 是 Unity WebGL 导出的默认 ID，若自定义则需修改
            var unityCanvas = iframe.contents().()[];
            
             (unityCanvas) {
                
                unityCanvas.();
            }
        }
    });
});