Google Apps Script如何将code.gs谷歌表格变量值传递到前端JavaScript

问题核心原因 #

• google.script.run 是异步执行的，你之前直接调用后马上读取变量，还没等服务端返回结果，逻辑就已经执行完了，所以拿到的是空值，默认跳转到facebook
• 模板语法<?=web?>需要在服务端渲染模板时给模板对象赋值对应的变量，你原doGet函数里没有给tmp.web赋值，所以这个语句是无效的
• 分开调用getWebsite和setWebsite会产生两次不必要的服务端请求，逻辑冗余还容易出现时序问题

修正后的代码 #

code.gs #

var url = "替换为你自己的谷歌表格url"; 

function doGet(e) {
  // 不需要提前传值，用异步请求获取即可
  return HtmlService.createHtmlOutputFromFile("index");
}

// 合并读取和更新逻辑，一次请求完成两个操作
function getAndUpdateWebsite() {
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("website");
  var currentWeb = ws.getRange(1,1).getValue();
  
  // 先确定下一个要更新的值
  let nextWeb;
  if (currentWeb === "Google") {
    nextWeb = "Youtube";
  } else if (currentWeb === "Youtube") {
    nextWeb = "Facebook";
  } else {
    nextWeb = "Google";
  }
  ws.getRange(1,1).setValue(nextWeb);
  
  // 返回当前读取到的站点给前端跳转用
  return currentWeb;
}

index.html #

<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Please Click Below</h1>
    <button id = "btn" type="button" >Open Window</button>
              
  <script>
  document.getElementById("btn").addEventListener("click", doStuff);
  
  function doStuff() {
    // 先打开空白窗口避免异步回调里的弹窗被浏览器拦截
    const newWin = window.open('about:blank');
    // 调用服务端函数，成功返回后执行回调
    google.script.run
      .withSuccessHandler(currentWeb => {
        // 根据返回的站点跳转
        let targetUrl;
        if (currentWeb === "Google") {
          targetUrl = "https://www.google.com/";
        } else if (currentWeb === "Youtube") {
          targetUrl = "https://www.youtube.com/";
        } else {
          targetUrl = "https://www.facebook.com/";
        }
        newWin.location.href = targetUrl;
      })
      .getAndUpdateWebsite();
  }
</script>

  </body>
</html>

逻辑说明 #

1. 合并读取和更新为同一个服务端函数，减少网络请求，避免时序错误
2. 使用withSuccessHandler绑定回调函数，只有等服务端返回当前站点值后，才执行跳转逻辑，确保拿到的是正确的当前值
3. 提前打开空白弹窗，避免浏览器把异步回调里的弹窗判定为恶意广告拦截

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