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

---

【踩坑记录】使用 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 的渲染。

完整代码实现

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