Layui 集成 Unity WebGL 时 Tab 切换黑屏的修复方案

Layui 集成 Unity WebGL 时 Tab 切换黑屏的修复方案

在 Web 应用中嵌入 Unity WebGL 内容时，如果将其放置在 Layui 的 Tab 组件内，经常会遇到一个棘手的问题：切换 Tab 后画面变黑，只有点击该区域才能恢复显示。这通常是因为 Unity 渲染上下文在 Tab 隐藏或失去焦点时被暂停了。

问题根源

Unity WebGL 插件依赖浏览器的焦点和可见性来维持渲染循环。当 Layui 切换 Tab 时，目标 DOM 元素可能被暂时隐藏（display: none），导致浏览器暂停该元素的渲染任务。虽然点击能重新触发焦点，但体验很差。

解决方案

核心思路很简单：监听 Layui 的 Tab 切换事件，一旦切换到包含 Unity 的 Tab，立即强制让内部的 Canvas 元素获取焦点，唤醒渲染器。

代码实现

我们需要利用 Layui 的 element 模块来监听事件。假设你的 Unity WebGL 是嵌入在 iframe 中的，且 iframe 内部有一个 ID 为 unity-canvas 的元素。

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

  // 监听指定名称的 Tab 切换事件
  element.on('tab(xbs_tab)', function(data){
    // data.index 是当前激活 Tab 的索引
    var activeTabId = data.index;

    // 根据索引找到对应的 iframe 容器
    // 注意：这里假设 .x-iframe 类名对应每个 Tab 的内容容器
    var iframe = $('.x-iframe').eq(activeTabId);

    // 进入 iframe 内部查找 Unity 的 canvas 元素
    // 跨域情况下可能需要处理 iframe.contents() 的权限问题
    var unityCanvas = iframe.contents().find('#unity-canvas')[0];

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

关键点解析

1. 模块加载：确保 layui.use 中引入了 element 模块，这是处理 Tab 交互的基础。