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

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

在 Web 应用中集成 Unity WebGL 内容时，如果将其嵌入到 Layui 的 Tab 组件中，经常会出现一个棘手的问题：切换 Tab 后画面变黑，只有点击黑屏区域才能恢复显示。

这通常是因为 Unity 渲染在 Tab 切换时被暂停，或者 Canvas 失去了焦点。要解决这个问题，核心在于监听 Tab 切换事件，并在切换完成后强制让包含 Unity 渲染的 Canvas 重新获得焦点。

问题根源

Unity WebGL 的渲染循环依赖于浏览器的上下文状态。当 Tab 被隐藏时，浏览器可能会暂停其渲染以节省资源。虽然 Layui 的 Tab 切换机制会触发 DOM 变化，但默认情况下不会自动唤醒 Canvas 的焦点，导致渲染层'休眠'。

解决方案

我们需要利用 Layui 的 element 模块监听 Tab 切换事件。一旦检测到用户切换到包含 Unity 内容的 Tab，就通过 JavaScript 访问该 Tab 内的 iframe，找到 Unity 的 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 类名需与实际页面结构保持一致
    var iframe = $('.x-iframe').eq(activeTabId);

    // 尝试获取 iframe 内部的 Unity canvas 元素
    var unityCanvas = iframe.contents().find('#unity-canvas')[0];

    // 如果找到元素，强制获取焦点以唤醒渲染
    if (unityCanvas) {
      unityCanvas.focus();
    }
  });
});