Google Apps Script Web App：如何切换HtmlOutput页面或替换内容？

除了前端JavaScript直接修改DOM内容，Google Apps Script提供了两种服务端驱动的简便方案：

1. 通过doGet接收参数动态返回页面 #

修改doGet函数，让它根据URL参数决定返回A还是B页面：

function doGet(e) {
  // 默认返回A页面，若URL带?page=B则返回B
  var targetPage = e.parameter.page || 'A';
  return HtmlService.createHtmlOutputFromFile(targetPage)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

在A.html中给按钮添加跳转链接，直接指向带参数的脚本URL：

<!-- A.html中的按钮 -->
<button onclick="window.location.href = '?page=B'">切换到B页面</button>

这种方式由服务端直接返回完整的新页面，属于整页跳转，适合需要完全切换页面场景。

2. 用google.script.run异步加载页面内容并替换 #

如果不想做整页跳转，可通过服务端函数获取B页面的HTML内容，再替换当前页面的指定区域：
首先在GS脚本中添加获取页面内容的函数：

function getPageHtml(pageName) {
  return HtmlService.createHtmlOutputFromFile(pageName).getContent();
}

然后在A.html中编写按钮的点击逻辑：

<!-- A.html中的按钮和内容容器 -->
<button onclick="replaceWithB()">加载B页面内容</button>
<div id="mainContent"></div>

<script>
function replaceWithB() {
  google.script.run
    .withSuccessHandler(function(htmlContent) {
      // 替换指定容器内容，若要替换整个页面用document.body.innerHTML = htmlContent
      document.getElementById('mainContent').innerHTML = htmlContent;
    })
    .getPageHtml('B');
}
</script>

这种方式异步获取服务端渲染的B页面内容，好处是B页面的动态内容（如GS脚本生成的变量）能直接被处理，无需前端手动拼接。

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