如何将Google Script变量传递至HTML以回显PropertiesService存储的设置

我看了你的代码，问题出在HTML页面没有正确接收Google Apps Script模板传递过来的变量。你在GS里已经把保存的时间赋值给了htmlTemplate.timehtml，但前端脚本不知道怎么获取这个后端变量，所以输入框没法显示默认值。下面是具体的修正方案：

核心问题分析 #

你在HTML脚本里写的var timehtml = time;是无效的——前端环境里根本不存在名为time的变量，必须使用Google Apps Script的模板输出语法（<?= ?>）来把后端传递的变量注入到前端页面中。

修正后的完整代码 #

1. GS文件（优化版） #

function openSettings() {
  var htmlTemplate = HtmlService.createTemplateFromFile('settingsForm');
  var userProperties = PropertiesService.getUserProperties();
  var time = userProperties.getProperty('selectedTime');
  
  // 处理首次打开无保存值的情况，避免输入框显示null
  htmlTemplate.timehtml = time || '';
  
  var html = htmlTemplate.evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setTitle('Settings')
    .setWidth(300);
    
  SpreadsheetApp.getUi().showSidebar(html);
}

function processForm(form) {
  var userProperties = PropertiesService.getUserProperties();
  // 直接保存表单提交的时间值，简化逻辑
  userProperties.setProperty('selectedTime', form.time);
}

2. HTML文件（两种可选方案） #

方案一：直接在输入框属性中填充默认值（最简洁）

<!DOCTYPE html>
<html>
  <div>
    <form>
      <!-- 使用模板语法直接注入后端变量作为默认值 -->
      <input type="text" name="time" id="time" style="width: 40px;" value="<?= timehtml ?>">
      <br><br>
      <input type="button" class="action" onClick="writeFormData(); alert('submitted')" value="Submit"/>
    </form>
  </div>

  <script type="text/javascript">
    function writeFormData() {
      google.script.run.processForm(document.forms[0]);
    }
  </script>
</html>

方案二：通过脚本赋值（适合需要额外逻辑处理的场景）

<!DOCTYPE html>
<html>
  <div>
    <form>
      <input type="text" name="time" id="time" style="width: 40px;">
      <br><br>
      <input type="button" class="action" onClick="writeFormData(); alert('submitted')" value="Submit"/>
    </form>
  </div>

  <script>
    // 用模板语法把后端变量注入到前端脚本中
    var savedTime = <?= timehtml ?>;
    var timeInput = document.getElementById("time");
    timeInput.value = savedTime;
  </script>

  <script type="text/javascript">
    function writeFormData() {
      google.script.run.processForm(document.forms[0]);
    }
  </script>
</html>

额外说明 #

• 如果后续要改成文档专属设置，只需要把PropertiesService.getUserProperties()替换成PropertiesService.getDocumentProperties()即可，其他逻辑完全不用改动。
• GS里的time || ''是为了处理用户第一次打开设置页面还没保存过值的情况，避免输入框显示null。

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