Layui 框架下 Unity WebGL 切换 Tab 黑屏问题的修复方案

问题现象

在 Web 应用中集成 Unity WebGL 内容时，如果将其嵌入到 Layui 的 Tab 组件中，经常会遇到一个棘手的问题：当用户切换到包含 Unity 渲染的标签页时，画面呈现黑屏状态。通常需要点击该区域后，画面才会恢复显示。

这通常是因为 Unity 渲染上下文在 Tab 隐藏时被暂停，或者 Canvas 元素未能及时获得焦点，导致浏览器认为该区域不可见或失去交互能力。

核心思路

解决这个问题的关键在于确保每次激活包含 Unity WebGL 的 Tab 时，渲染引擎能立即重新获取控制权。具体做法是监听 Layui 的 Tab 切换事件，并在回调中强制让对应的 Canvas 元素获得焦点。

代码实现

我们需要利用 Layui 的 element 模块来监听 Tab 变化。假设你的 Tab 容器名称为 xbs_tab，且每个 Tab 内部通过 iframe 加载了 Unity 构建的内容。

layui.use(['element'], function() {
  var element = layui.element;

  // 监听 Tab 切换事件
  element.on('tab(xbs_tab)', function(data) {
    // 获取当前选中的 tab 索引
    var activeTabId = data.index;
    
    // 根据索引定位到对应的 iframe 元素
    var iframe = $('.x-iframe').eq(activeTabId);
    
    // 尝试获取 iframe 内部的 Unity canvas 元素
    // 注意：需确保 iframe 与父页面同源，否则 contents() 可能无法访问
    var unityCanvas = iframe.contents().find('#unity-canvas')[0];
    
    if (unityCanvas) {
      unityCanvas.focus(); // 强制 Canvas 获取焦点，唤醒渲染
    }
  });
});

这段代码的核心逻辑在于 unityCanvas.focus()。虽然看起来简单，但它能有效触发浏览器的焦点机制，告诉 Unity WebGL 插件'现在轮到你了'，从而恢复渲染循环。