Google Apps Script中如何从一个HTML页面调用另一个HTML页面

1. 改造code.gs路由逻辑 #

原有doGet函数只支持返回Input单页面，需要新增参数识别逻辑，支持切换返回output页面，同时新增前端可调用的内容存储、跳转地址生成方法：

function doGet(e) {
  // 识别URL中的page参数判断要加载的页面
  const targetPage = e.parameter.page;
  if (targetPage === 'output') {
    // 从临时缓存中读取Input页面传递的内容
    const savedInput = CacheService.getScriptCache().get('user_css_content');
    const outputTpl = HtmlService.createTemplateFromFile('output');
    // 将读取到的内容注入output页面模板
    outputTpl.renderContent = savedInput || '暂未获取到有效输入内容';
    return outputTpl.evaluate()
      .setTitle("Generated StyleGuide");
  }
  // 默认返回Input输入页
  return HtmlService.createTemplateFromFile('Input')
      .evaluate()
      .setTitle("GL StyleGuide")
      .setFaviconUrl("https://fonts.ab24dp.png");
}

// 供前端调用：存储用户输入内容，返回output页面的跳转地址
function cacheInputAndGetRedirectUrl(cssContent) {
  // 缓存有效期设置为10分钟，满足正常跳转的时间窗口
  CacheService.getScriptCache().put('user_css_content', cssContent, 600);
  return `${ScriptApp.getService().getUrl()}?page=output`;
}

2. 修复Input.html的交互逻辑 #

原有代码存在a标签嵌套button的交互冲突问题，同时没有真正读取textarea的输入内容做提交：

<div>
  <label id="label">Please Enter CSS</label>
  <textarea id="input-textarea" style="width: 100%; min-height: 200px;"></textarea>
  <input type='button' id="submit" value='Get Style Guide' onclick="handleSubmit()">
</div>

<script>
function handleSubmit() {
  // 读取文本域的输入内容
  const inputValue = document.getElementById('input-textarea').value.trim();
  if (!inputValue) {
    alert('请先输入需要处理的CSS内容');
    return;
  }
  // 调用后端方法存储内容，拿到跳转地址后执行页面跳转
  google.script.run
    .withSuccessHandler((redirectUrl) => {
      window.location.href = redirectUrl;
    })
    .withFailureHandler((err) => {
      alert('提交失败：' + err.message);
    })
    .cacheInputAndGetRedirectUrl(inputValue);
}
</script>

3. 编写output.html的内容渲染逻辑 #

直接在output模板中读取传入的内容变量，完成页面渲染：

<div>
  <h3>Style Guide 输出内容</h3>
  <div style="padding: 16px; border: 1px solid #e5e7eb; margin-top: 12px; border-radius: 4px;">
    <!-- 注入从Input页传递的内容，如需转义纯文本可替换为 <?= renderContent ?> -->
    <?!= renderContent ?>
  </div>
  <a href="<?= ScriptApp.getService().getUrl() ?>">返回输入页面</a>
</div>

注意事项 #

• 不要用a标签嵌套button实现跳转，会出现元素默认行为和JS逻辑的冲突，直接通过button绑定点击事件处理提交流程即可
• 长文本类的输入内容不要直接拼接在URL参数中做页面跳转传值，GAS Web App存在URL长度限制，使用ScriptCache做临时内容存储是兼容性最好的方案
• 模板语法中，<?!= 变量名 ?>会输出未经转义的内容（适合渲染HTML/CSS这类带代码标签的内容），<?= 变量名 ?>会输出转义后的纯文本

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