Layui 框架下 Unity WebGL Tab 切换黑屏解决方案

Layui 框架下 Unity WebGL Tab 切换黑屏解决方案

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

这通常是因为 Tab 切换导致 Unity 渲染上下文被挂起，或者 Canvas 元素失去了焦点。要解决这个问题，关键在于确保每次切回包含 Unity 的 Tab 时，能强制唤醒渲染。

核心思路

利用 Layui 提供的 element 模块监听 Tab 切换事件。当用户切换标签时，通过 JavaScript 主动获取当前 Tab 内 iframe 中的 Unity canvas 元素并调用 focus() 方法，以此触发渲染恢复。

代码实现

首先需要引入 Layui 的 element 模块，并绑定 Tab 切换回调。注意这里的 xbs_tab 和 .x-iframe 需要根据你实际项目的 HTML 结构进行调整。

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 的标准写法，确保只在 Tab 切换时执行逻辑，避免性能浪费。