点击链接清空页面后延迟1秒加载Unity游戏的问题排查

现有代码问题汇总 #

• 语法错误：nothing是未定义变量，清空内容需赋值为空字符串""
• 无合法延时实现：JS没有原生的wait语法，需通过setTimeout实现1秒等待
• 链接调用错误：javascript:wipeHTML缺少函数执行括号，改为javascript:wipeHTML()才会触发函数执行
• 资源销毁逻辑错误：直接清空document.documentElement.innerHTML会把Unity依赖的样式、加载器脚本全部销毁，后续无法初始化游戏
• HTML结构不规范：<body>标签外的内容会被浏览器自动移入body内，影响元素清除逻辑
• Unity初始化逻辑提前执行：当前代码页面加载就自动初始化Unity，不符合点击后才加载的需求

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
  <!-- 提前保留Unity依赖的资源，避免清空后丢失 -->
  <link rel="stylesheet" href="TemplateData/style.css">
  <script src="TemplateData/UnityProgress.js"></script>
  <script src="TemplateData/unityloader41.js"></script>
  <script>
    function wipeHTML() {
      // 第一步：清空body内所有内容，页面变为空白
      document.body.innerHTML = ""
      // 第二步：1秒延时后加载Unity游戏
      setTimeout(() => {
        // 插入Unity需要的容器节点
        document.body.innerHTML = `
          <div class="webgl-content">
            <div id="gameContainer" style="width: 100vw; height: 100vh; margin: 0;"></div>
          </div>
        `
        // 初始化Unity游戏
        var gameInstance = UnityLoader.instantiate("gameContainer", "Build/slope.json", {
          onProgress: UnityProgress,
          Module: {
            onRuntimeInitialized: function() {
              UnityProgress(gameInstance, "complete")
            }
          }
        });
      }, 1000)
    }
  </script>
</head>
<body style="margin: 0; overflow: hidden;">
  <h1>
    <a href="javascript:wipeHTML()">wipe everything</a>
  </h1>
  <div>
    <h1>hello</h1>
    <h3>erase me</h3>
  </div>
</body>
</html>

修复说明 #

• Unity依赖的样式和脚本放在head标签内保留，不会被body清空操作影响
• 点击链接后先清空body内所有内容，页面呈现1秒空白后自动插入Unity容器并初始化游戏
• 容器宽高设置为100vw和100vh，保证游戏占满整个页面视口

内容的提问来源于stack exchange，提问作者user9384