Google Apps Script Web App页面点击链接导航空白问题求助

问题诊断 #

点击链接后跳转的URL是Google Apps Script的脚本编辑器预览面板地址（包含userCodeAppPanel），这个预览环境不支持通过查询参数?page=xxx触发doGet函数加载对应页面，因此页面显示空白。而手动访问的正式部署Web App地址（script.google.com/macros/s/...）能正常解析查询参数并调用doGet返回对应页面。

解决方案 #

方案1：使用正式部署URL访问

部署Web App后，复制部署页面提供的正式URL（格式类似https://script.google.com/macros/s/[部署ID]/exec或/dev），直接用该URL打开应用，点击链接即可正常切换页面。

方案2：动态生成绝对路径链接（推荐）

如果需要在预览环境测试，或避免硬编码URL的麻烦，可以通过脚本动态获取当前Web App的URL并设置链接：

1. 在Code.gs中添加获取Web App URL的函数：

function getWebAppUrl() {
  return ScriptApp.getService().getUrl();
}

2. 修改index.html和about.html，通过google.script.run动态更新链接：

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = () => {
        google.script.run.withSuccessHandler(url => {
          document.querySelectorAll('a').forEach(link => {
            const query = link.getAttribute('href');
            link.setAttribute('href', `${url}${query}`);
          });
        }).getWebAppUrl();
      }
    </script>
  </head>
  <body>
    <h1>Home Page</h1>
    <ul>
      <li><a href="?page=about" target="_top">About Us</a></li>
      <li><a href="?page=new-reg">New Registration</a></li>
      <li><a href="?page=investor">Investor Login</a></li>
    </ul>
  </body>
</html>

这种方式会自动适配预览和正式部署环境，确保链接始终指向能正确解析查询参数的Web App地址。

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