Layui 集成 Unity WebGL 时 Tab 切换导致黑屏的修复方案

Layui 集成 Unity WebGL 时 Tab 切换导致黑屏的修复方案

在 Web 开发中，将 Unity WebGL 内容嵌入到前端框架（如 Layui）的 Tab 组件里时，常会遇到一个棘手的问题：当用户切换到其他 Tab 再切回来时，Unity 渲染画面会变黑，只有点击黑屏区域才能恢复显示。

这通常是因为 Tab 切换导致 Canvas 失去焦点，或者浏览器的渲染上下文被暂停。要解决这个问题，核心思路是在 Tab 切换事件中强制让 Unity 的 Canvas 重新获得焦点。

问题现象

当 Unity WebGL 内容被放置在多个 Tab 标签页中时，一旦离开该 Tab，渲染层往往处于挂起状态。再次切换回该 Tab 时，画布虽然可见但无渲染输出，表现为黑屏。

解决思路

我们需要利用 Layui 提供的 element 模块监听 Tab 切换事件。当检测到目标 Tab 被激活时，通过 JavaScript 访问其内部的 iframe，找到 Unity 的 canvas 元素并调用 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 元素
        var iframe = $('.x-iframe').eq(activeTabId);
        
        // 尝试获取 iframe 内部的 Unity canvas 元素
        var unityCanvas = iframe.contents().find('#unity-canvas')[0];
        
        if (unityCanvas) {
            // 强制获取焦点，触发渲染恢复
            unityCanvas.();
        }
    });
});