如何实现Google Script与HTML间变量传递以更新HTML文本？

核心问题梳理 #

你的代码主要有3个关键问题导致Google Script与HTML通信失败：

1. 异步顺序错误：google.script.url.getLocation是异步操作，你在DOM就绪后直接执行更新DOM的代码时，accountid可能还没获取到，而且searchforcredits函数定义后从未调用。
2. 变量作用域错误：更新DOM的代码放在了updateCredits函数外面，无法访问函数内部的creditsremaining和creditstotal变量。
3. 服务器端错误处理无效：GS代码里的alert(e)在服务器环境中无法执行，应该替换为日志输出。

修改后的GS代码 #

function credsearch(searchid) {
  try {
    const tosearch = searchid;
    const s = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();     
    const data = SpreadsheetApp.openById("1Okxy3sUkPrKy1wBRs5yw8AAv4qHH3ldOfsA3usziVDo")
      .getSheetByName("Sheet1")
      .getRange('A2:Z')
      .getValues();
    const spreadsheet = SpreadsheetApp.getActive();
    const tf = spreadsheet.createTextFinder(tosearch);
    const all = tf.findAll();
    let searchvalue = "";
    // 遍历所有匹配项，取最后一个的A1标识（如果需要取第一个可以直接取all[0]）
    for (let i = 0; i < all.length; i++) {
      searchvalue = all[i].getA1Notation();
    }
    // 处理未找到匹配项的情况
    if (!searchvalue) {
      return { creditsremaining: "10", creditstotal: "10" };
    }
    const searchValue = s.getRange(searchvalue).getValue();
    const dataList = data.map(x => x[0]);
    const index = dataList.indexOf(searchValue);

    if (index === -1) {
      return { creditsremaining: "10", creditstotal: "10" };
    } else {
      const creditsremaining = data[index][1];
      const creditstotal = data[index][2];
      return { creditsremaining, creditstotal };
    }
  } catch(e) {
    // 服务器端用console.log记录错误，不要用alert
    console.log("错误信息：", e);
    return { creditsremaining: "Null", creditstotal: "Null" };
  }
}

修改后的HTML代码 #

<style>
.grid .bar {
    background-color: #301c4a;
    margin-bottom: 10px;
    align-self: flex-end;
    border-radius: 10px;
    position: relative;
    text-align: left;
}
#speciallicenses .grid.horizontal {
    flex-direction: column;
    border-bottom: none;
    background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(0,0,0,0) 20%);
}
      
.grid.horizontal {
    flex-direction: column;
    border-bottom: none;
    background: repeating-linear-gradient(90deg,transparent,transparent 19.5%,rgba(0,0,0,0) 20%);
    border-radius: 10px;
}
.grid.horizontal .bar {
    height: 45px;
    width: var(--bar-value);
    align-self: flex-start;
    margin: auto 0 auto 0;
    border-radius: 10px;
}
.grid.horizontal .bar::after {
    top: initial;
    left: 100%;
    padding: 0 10px;
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    transform: rotate(0deg);
    line-height: 45px;
}
</style>
<div class="grid horizontal" style="background-color:#eeeeee"> 
<div id="creditsbar" class="bar" style="vertical-align:center;width:50%;margin-bottom:0px;padding-top:10px;padding-left:10px;padding-bottom:0px;color:#ffffff"> 
<span id="creditsremaining"></span>/<span id="creditstotal"></span>
</div> 
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
// 声明accountid变量，避免全局污染
let accountid;

google.script.url.getLocation(function(location) {
  accountid = location.parameters["accountid"][0]; // 注意：location.parameters返回的是数组，要取第一个元素
  console.log("获取到的accountid：", accountid);
  // 获取到参数后立即调用查询函数
  searchforcredits();
});

function searchforcredits() {
  if (!accountid) return; // 防止参数为空时调用
  google.script.run
    .withSuccessHandler(updateCredits)
    .withFailureHandler(function(error) {
      console.log("通信失败：", error);
      // 失败时可以设置默认值
      updateCredits({ creditsremaining: "10", creditstotal: "10" });
    })
    .credsearch(accountid);
}

function updateCredits(result) {
  const creditsremaining = result.creditsremaining;
  const creditstotal = result.creditstotal;
  
  // 把更新DOM的代码放到这个函数内部，确保能拿到返回值
  $('span#creditsremaining').text(creditsremaining);
  $('span#creditstotal').text(creditstotal);
  // 处理除数为0的情况，避免报错
  const barwidth = creditstotal != 0 ? (creditsremaining/creditstotal) *100 : 0;
  const barpercent = barwidth + '%';
  $('#creditsbar').css("width", barpercent);
}
</script>

关键修改说明 #

• 异步逻辑修正：在google.script.url.getLocation的回调里直接调用searchforcredits，确保参数获取到后再发起GS调用；同时注意location.parameters返回的是数组，要取[0]拿到实际值。
• 作用域修正：把更新DOM的代码全部移到updateCredits函数内部，确保能访问到GS返回的变量。
• 错误处理增强：给google.script.run添加withFailureHandler，处理通信失败的情况，同时GS里用console.log替代无效的alert。
• 边界情况处理：添加了searchvalue为空、creditstotal为0的判断，避免代码报错。

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