如何在App Script中实现返回首页的goBack函数？

这个问题我之前帮不少开发者处理过，核心原因是App Script的Web App页面切换逻辑和普通网页不一样——window.history.back()依赖浏览器的历史记录栈，但如果你的页面切换不是通过普通的<a>标签跳转，而是通过服务端分发或者客户端动态替换内容，浏览器的历史栈根本没被正确更新，所以自然没法生效。

下面给你三个实用的解决方案，按需选择：

方案1：直接跳转回首页（最简单高效） #

如果你的Web App是通过doGet函数根据URL参数分发页面的（比如访问?page=second加载second.html），那完全不用依赖历史记录，直接在second/third页面里写一个跳转函数就行：

<!-- 在second.html/third.html中添加返回按钮和脚本 -->
<button onclick="goBack()">返回首页</button>

<script>
function goBack() {
  // 直接跳转到Web App的根地址（也就是index.html对应的页面）
  window.location.href = "https://script.google.com/macros/s/你的Web App部署ID/exec";
  <!-- 开发测试阶段可以用相对路径简化：window.location.href = "/" -->
}
</script>

方案2：手动维护历史栈（支持原生前进/后退） #

如果想保留浏览器原生的前进/后退行为，那需要在切换页面时手动调用history.pushState()更新历史栈，这样window.history.back()就能正常工作了：

第一步：在index.html中处理页面跳转并更新历史栈 #

<button onclick="goToSecondPage()">进入第二页</button>

<script>
function goToSecondPage() {
  // 动态加载second.html的内容
  fetch('second.html')
    .then(res => res.text())
    .then(html => {
      document.body.innerHTML = html;
      // 手动添加一条历史记录到栈中
      history.pushState({ page: 'second' }, '第二页', '?page=second');
    });
}

// 监听浏览器的back事件，处理历史栈变化
window.addEventListener('popstate', (event) => {
  if (event.state?.page === 'second') {
    // 回到首页，重新加载index.html内容
    fetch('index.html')
      .then(res => res.text())
      .then(html => {
        document.body.innerHTML = html;
      });
  }
});
</script>

第二步：在second.html中直接使用history.back() #

<button onclick="goBack()">返回首页</button>

<script>
function goBack() {
  window.history.back();
}
</script>

方案3：通过服务端模板传递首页地址（避免硬编码URL） #

如果你的页面是通过App Script的模板渲染的，可以在服务端把首页地址作为变量传递给每个页面，这样不用硬编码部署ID：

第一步：在Code.gs的doGet函数中传递变量 #

function doGet(e) {
  const page = e.parameter.page || 'index';
  const template = HtmlService.createTemplateFromFile(page);
  // 获取Web App的根地址并传递给模板
  template.homeUrl = ScriptApp.getService().getUrl();
  return template.evaluate();
}

第二步：在second.html中使用模板变量跳转 #

<button onclick="goBack()">返回首页</button>

<script>
function goBack() {
  window.location.href = <?= homeUrl ?>;
}
</script>

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