Codesandbox按钮预览正常但标签页失效，Chromebook环境求排查

我是编程新手，想在学校Chromebook上游玩slowroads.io游戏，修改了一段脚本实现点击按钮打开加载目标网站的空白标签页。但按钮仅在Codesandbox编辑器预览中有效，独立标签页中无法正常工作，且学校已封禁Codesandbox编辑器，尝试ChatGPT未解决问题，请求技术帮助。

原代码：

<html>
  <head> </head>

  <body>
    <button>Play Now</button>
    <script>
      var urlObj = new window.URL(window.location.href);
      var url =
        "https://script.google.com/macros/s/AKfycbxelPWLSDPiu3ayp2BRrr6gMa5dQHTHCWI6cqYGmiLgG-UL9-HuRQIwFzDywOUTZWUvCQ/exec";
      if (url) {
        var win;

        document.querySelector("button").onclick = function () {
          if (win) {
            win.focus();
          } else {
            win = window.open();
            win.document.body.style.margin = "0";
            win.document.body.style.height = "100vh";
            var iframe = win.document.createElement("iframe");
            iframe.style.border = "none";
            iframe.style.width = "100%";
            iframe.style.height = "100%";
            iframe.style.margin = "0";
            iframe.src = url;
            win.document.body.appendChild(iframe);
          }
          document.querySelector("button").style.bacground = "grey";
          document.querySelector("button").innerHTML = "Play Now";
        };
      }
    </script>
  </body>
</html>

核心问题 #

1. 拼写错误：代码中bacground是笔误，应为background，导致按钮样式异常，可能混淆功能是否触发的判断。
2. 跨域与CSP限制：你使用的Google Apps Script链接未配置正确的跨域权限，独立页面中加载该链接的iframe会被浏览器内容安全策略（CSP）拦截，而Codesandbox预览环境CSP规则宽松，因此能生效。
3. 冗余中转层：通过Google脚本中转加载游戏完全没必要，反而增加了跨域风险。

修正代码 #

直接简化逻辑，跳过中转层，在新窗口直接打开游戏网站，同时处理弹窗拦截情况：

<html>
  <head> </head>
  <body>
    <button>Play Now</button>
    <script>
      const playBtn = document.querySelector("button");
      let gameWindow;

      playBtn.addEventListener("click", () => {
        // 如果窗口已存在且未关闭，直接聚焦
        if (gameWindow && !gameWindow.closed) {
          gameWindow.focus();
          return;
        }

        // 直接打开游戏网站
        gameWindow = window.open("https://slowroads.io", "_blank");
        
        // 处理弹窗被浏览器拦截的情况
        if (!gameWindow) {
          playBtn.textContent = "请允许弹窗";
          setTimeout(() => playBtn.textContent = "Play Now", 2000);
        } else {
          playBtn.style.background = "grey";
        }
      });
    </script>
  </body>
</html>

本地运行方法 #

1. 把上述代码复制到Chromebook自带的“文本”应用中。
2. 保存文件为game-launcher.html（注意后缀必须是.html）。
3. 在浏览器中打开这个本地文件，路径类似file:///home/你的用户名/Downloads/game-launcher.html。

额外说明 #

• 如果学校浏览器直接封禁了slowroads.io域名，任何方法都无法绕过；但如果只是限制Codesandbox等平台，直接打开游戏域名应该可行。
• 避免使用第三方脚本中转加载目标网站，这会引入不必要的跨域和权限问题。

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