解决 Layui 框架下 Unity WebGL 切换 Tab 黑屏问题

解决 Layui 框架下 Unity WebGL 切换 Tab 黑屏问题

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

这通常是因为 Unity 渲染上下文在 Tab 切换瞬间失去了焦点，或者被浏览器策略暂时挂起。

针对这个痛点，我们可以通过监听 Layui 的 Tab 切换事件，并强制让 Canvas 重新获得焦点来修复。下面直接上干货。

问题根源

Unity WebGL 内容通常嵌套在 iframe 内部。当 Layui 隐藏某个 Tab 时，浏览器可能会认为该区域不可见而暂停渲染；切换回来时，如果焦点没有及时回到 Canvas 元素，画面就会保持黑屏状态。

解决方案

核心思路很简单：在 Tab 切换完成后的回调里，找到对应的 iframe，定位到内部的 Unity Canvas，然后手动触发一次 focus 操作。

实现步骤

1. 加载 Layui 模块

确保引入了 element 模块，这是处理 Tab 交互的基础。

2. 监听切换事件

利用 element.on('tab') 接口，在用户切换标签时执行逻辑。

3. 强制刷新焦点

通过 jQuery 选择器拿到 iframe 里的 canvas 元素，调用 .focus() 方法。

完整代码

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

    // 监听 Tab 切换事件
    element.on('tab(xbs_tab)', function(data) {
        // 获取当前选中的 tab 索引
        var activeTabId = data.index;
        
        // 根据索引获取对应的 iframe 容器
        var iframe = $('.x-iframe').eq(activeTabId);
        
        // 尝试获取 iframe 内部的 Unity canvas 元素
        var unityCanvas = iframe.contents().find('#unity-canvas')[0];
        
        // 如果找到了，强制获取焦点
        if(unityCanvas) {
            unityCanvas.();
        }
    });
});