Layui 下解决 Unity WebGL Tab 切换黑屏

Layui 下 Unity WebGL Tab 切换黑屏修复记录

在项目中使用 Layui 做后台管理，有一个 Tab 页嵌入了 Unity WebGL 内容。用户切换 Tab 再切回来时，渲染画面会黑掉——得在黑屏区域点一下才能恢复显示。

原因很直白：Tab 切换让 Unity 的渲染丢掉了焦点或暂停了。要让它活过来，最简单的就是在切到目标 Tab 后主动把焦点设回 Unity 的 canvas 上。

Layui 的 element 模块能监听 Tab 切换事件，这正好拿来用。

layui.use(['element'], function() {
    var element = layui.element;
    // 监听 Tab 切换
    element.on('tab(xbs_tab)', function(data) {
        // 假设每个 Tab 里的 iframe 都有 .x-iframe 这个类
        var activeTabId = data.index;
        var iframe = $('.x-iframe').eq(activeTabId);
        if (iframe.length) {
            var unityCanvas = iframe.contents().find('#unity-canvas')[0];
            if (unityCanvas) {
                unityCanvas.focus();  // 重新获得焦点，渲染恢复
            }
        }
    });
});

思路很简单：获得当前激活的 Tab 索引，找到对应的 iframe，再拿到里面的 Unity canvas，然后 focus() 一把。

实际用下来注意两点：

• 如果 Unity 内容还没加载完就切过去，focus() 可能无效。可以加个小延迟，或者监听 iframe 的 load 事件再操作。
• 跨域问题：如果 iframe 和主页面不同源， iframe.contents() 会报错。那就只能在 iframe 内部写代码监听消息，让主页面通知 iframe 里面的 Unity 实例去 focus()。