Google Apps Script Web应用动态加载HTML片段无刷新更新方案咨询

问题根源 #

GAS部署的Web应用没有公开的静态资源目录，直接使用普通Ajax请求tableDiv.html这类文件路径会被GAS路由拦截，因此出现404报错；自定义Ajax请求也容易触发GAS的跨域、身份校验规则，导致内容返回异常无法渲染。

标准实现步骤 #

1. 服务端（Code.gs）配置 #

除基础的doGet入口函数外，额外定义公开的HTML片段返回函数，注意函数名不能带下划线后缀，否则前端无法调用：

// Code.gs 服务端代码
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('动态加载示例')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// 专门返回表格HTML片段的公开函数，可自定义参数传递筛选条件
function getTableHtml() {
  // 可在此处先读取GSheet数据、组装动态内容，再返回HTML片段
  // 直接读取静态HTML片段的写法如下
  return HtmlService.createHtmlOutputFromFile('tableDiv').getContent();
}

2. 前端页面逻辑实现 #

使用GAS官方提供的google.script.runAPI调用服务端函数，天然适配GAS的跨域、权限规则，无需自行构造Ajax请求：

原生JS实现

<!-- 主页面index.html 结构 -->
<button id="loadTableBtn">加载表格</button>
<div id="targetContainer"></div>

<script>
document.getElementById('loadTableBtn').addEventListener('click', function() {
  google.script.run
    // 请求成功回调，将返回的HTML插入目标容器
    .withSuccessHandler(function(htmlContent) {
      document.getElementById('targetContainer').innerHTML = htmlContent;
    })
    // 报错处理回调
    .withFailureHandler(function(error) {
      console.error('加载失败：', error);
    })
    // 调用服务端函数，需传参数直接写入括号即可，例如.getTableHtml(1, 10)
    .getTableHtml();
});
</script>

JQuery实现

<!-- 主页面index.html 结构，自行引入JQuery库 -->
<button id="loadTableBtn">加载表格</button>
<div id="targetContainer"></div>

<script>
$('#loadTableBtn').click(function() {
  google.script.run
    .withSuccessHandler(htmlContent => {
      $('#targetContainer').html(htmlContent);
    })
    .withFailureHandler(error => {
      console.error('加载失败：', error);
    })
    .getTableHtml();
});
</script>

3. 片段文件规范 #

要加载的tableDiv.html仅保留需要插入的HTML片段即可，不要包含<html>、<head>、<body>等全局标签，避免渲染异常：

<!-- tableDiv.html 示例内容 -->
<table border="1">
  <tr>
    <th>姓名</th>
    <th>数据</th>
  </tr>
  <tr>
    <td>测试用户1</td>
    <td>100</td>
  </tr>
  <tr>
    <td>测试用户2</td>
    <td>200</td>
  </tr>
</table>

常见异常排查 #

• 无报错但内容不渲染：检查HTML片段的标签是否闭合，是否存在多余的全局标签、语法错误
• 权限报错：部署Web应用时，权限需选择对应访问范围，公开访问需选择「任何人，甚至匿名用户」
• 修改后不生效：每次代码修改后需重新部署新版本，不能使用旧的部署链接测试，可通过无痕模式排除缓存影响

内容的提问来源于stack exchange，提问作者k.b