【踩坑记录】使用 Layui 框架时解决 Unity WebGL 渲染在 Tab 切换时黑屏问题

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

这个问题通常是因为 Unity 渲染在 Tab 切换时被暂停或未能获得焦点所致。

在本文中，我们将介绍如何在使用 Layui 框架时，通过监听 Tab 切换事件并强制 Unity WebGL 渲染恢复，来解决这一问题。

1. 问题描述

当 Unity WebGL 内容嵌入到页面中的多个 Tab 中时，用户切换 Tab 时，Unity 渲染内容可能会变黑。问题的根源通常是 Unity 渲染在 Tab 切换后没有正确地恢复，导致渲染被暂停或者丢失。

2. 解决思路

要解决这个问题，关键是确保每次切换到包含 Unity WebGL 的 Tab 时，Unity 渲染能够继续运行。具体思路如下：

监听 Tab 切换事件 ：通过 Layui 框架提供的事件，监听 Tab 切换，获取当前激活的 Tab。
强制 Unity canvas 获取焦点 ：每当 Tab 切换时，通过 JavaScript 强制切换到的 Tab 中的 Unity canvas 元素获得焦点，这样 Unity 渲染就能继续正常显示。

3. 解决方案实现

步骤 1：监听 Tab 切换事件

Layui 框架中的 element 模块提供了 tab 事件，可以用于监听 Tab 的切换。当 Tab 切换时，可以通过事件获取到当前活动 Tab 的索引值，并确定哪个 Tab 中包含 Unity WebGL 内容。

步骤 2：获取当前 Tab 中的 Unity `canvas`

Unity WebGL 通常嵌入在一个 iframe 中，iframe 内部包含 Unity 渲染的 canvas 元素。在 Tab 切换时，我们需要访问该 iframe，并获取其中的 Unity canvas 元素。

步骤 3：强制获取焦点

JavaScript 的 focus() 方法可以确保 canvas 元素获得焦点，从而恢复 Unity 的渲染。

完整代码实现

javascript 复制代码

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

    // 监听 Tab 切换事件
    element.on('tab(xbs_tab)', function(data) {
        // 获取当前选中的 tab 对应的 iframe
        var activeTabId = data.index;
        var iframe = $('.x-iframe').eq(activeTabId); // 获取当前 tab 对应的 iframe
        
        // 获取 iframe 中的 Unity canvas 元素，若存在，则主动获取焦点
        var unityCanvas = iframe.contents().find('#unity-canvas')[0];
        if (unityCanvas) {
            unityCanvas.focus(); // 强制 Unity canvas 获取焦点
        }
    });
});

4. 代码解析

layui.use(['element'], function() {...}) ：加载 Layui 的 element 模块，使用 element 模块来处理 Tab 事件。
element.on('tab(xbs_tab)', function(data) {...}) ：监听 tab(xbs_tab) 事件，用户切换 Tab 时触发该回调函数。
$('.x-iframe').eq(activeTabId) ：通过 activeTabId 获取当前选中的 Tab 对应的 iframe 元素。
iframe.contents().find('#unity-canvas')[0] ：获取当前 iframe 中的 Unity WebGL canvas 元素。
unityCanvas.focus() ：强制 Unity canvas 获取焦点，确保渲染恢复。

5. 测试与优化

在实现了上述代码后，切换 Tab 时 Unity 渲染应能正常恢复。如果仍然存在渲染延迟或异常的情况，可以尝试以下优化措施：

Tab 切换时延迟处理 ：如果需要在 Unity WebGL 内容加载完成后再恢复渲染，可以在切换 Tab 后稍作延迟再调用 focus() 方法。
确保 iframe 加载完成 ：确保 iframe 中的内容加载完成后再进行焦点恢复操作。可以通过监听 iframe 的加载事件来控制焦点的恢复时机。

6. 总结

通过监听 Layui 框架的 Tab 切换事件并强制 Unity WebGL 的 canvas 元素获取焦点，我们成功解决了 Unity 渲染在 Tab 切换时变黑的问题。这个方法简单有效，不依赖于浏览器的 focus 或 visibilitychange 事件，因此在 Tab 切换时能够稳定地恢复渲染。

如果你在开发过程中遇到类似问题，希望本篇博客能为你提供一些帮助和启发。如果有任何问题或其他解决方案，欢迎在评论区交流！

【踩坑记录】使用 Layui 框架时解决 Unity WebGL 渲染在 Tab 切换时黑屏问题