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

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

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

这通常是因为浏览器为了节省资源，在 Tab 失去焦点或隐藏时会暂停 Canvas 的渲染循环。要解决这个问题，核心思路是在 Layui 监听 Tab 切换事件时，强制让包含 Unity WebGL 的 Canvas 元素重新获取焦点，从而唤醒渲染。

问题根源分析

当 Unity WebGL 内容被包裹在 iframe 中并置于 Layui 的 Tab 面板内时，Tab 切换会导致当前激活的 DOM 节点发生变化。虽然 iframe 依然存在，但内部的 Canvas 失去了焦点（Focus），浏览器的渲染引擎可能会挂起该 Canvas 的绘制请求，表现为黑屏。

实现方案

我们需要利用 Layui 提供的 element 模块来监听 Tab 的切换行为。当切换发生时，通过 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 元素
    // 注意：这里的 .x-iframe 需替换为你实际项目中 iframe 的选择器类名
    var iframe = $('.x-iframe').eq(activeTabId);
    
    // 尝试获取 iframe 内部文档中的 Unity canvas 元素
    // #unity-canvas 是 Unity WebGL 导出的默认 ID，若自定义请修改
    var unityCanvas = iframe.contents().find('#unity-canvas')[];
    
     (unityCanvas) {
      unityCanvas.(); 
    }
  });
});