Layui 集成 Unity WebGL 时 Tab 切换黑屏的解决方案

Layui 集成 Unity WebGL 时 Tab 切换黑屏的解决方案

在 Web 应用中集成 Unity WebGL 内容时，如果将其嵌入 Layui 的 Tab 组件中，经常会遇到一个棘手的问题：切换 Tab 后，Unity 渲染区域直接变黑，只有点击该区域才能恢复显示。

这通常是因为 WebGL 上下文在 Tab 隐藏时被挂起，或者 Canvas 元素失去了焦点。要解决这个问题，核心思路是在 Layui 触发 Tab 切换事件时，强制让目标 Tab 内的 Unity Canvas 重新获取焦点。

核心实现逻辑

我们不需要复杂的轮询或浏览器事件监听，直接利用 Layui 提供的 tab 事件即可。关键在于找到当前激活 Tab 对应的 iframe，并访问其内部的 Canvas 元素调用 focus()。

代码实现

下面是一个完整的示例，展示了如何挂载监听器并处理焦点恢复。

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);

        // 尝试获取 iframe 内部的 Unity Canvas 元素
        // 注意跨域限制，确保 iframe 同源或已配置 CORS
        var unityCanvas = iframe.contents().find('#unity-canvas')[0];

        if (unityCanvas) {
            // 关键一步：强制获取焦点，唤醒渲染
            unityCanvas.();
        }
    });
});