在Google App Script中将变量显示为html？

Question

假设我们有一个变量。此变量是在 google app 脚本中创建的。在该应用程序脚本项目中，您有两个文件。首先，变量来自的 .gs 文件。接下来，您有 html 文件。怎么把变量转成html？

GAS:
function doGet() {
    return HtmlService.createHtmlOutputFromFile('index');
}
function items() {
    var exmp = 45;
    document.getElementById("test").innerHTML = "You have " + exmp + " items";    

HTML:
<script>
    google.script.run.items();
</script>

<div id="test"></div>

但是，这不起作用。我怎样才能做到这一点？

Answer 1

如果您阅读 HTML 服务文档的 Private Functions 部分，您会发现一个示例几乎完全符合您的要求。下面的代码将该示例改编为您的示例。

您需要将 GAS 服务器的内容与 HTML 客户端的内容分开。例如，document.getElementById("test").innerHTML = ... 在服务器/GAS 代码的上下文中没有任何意义。相反，document 的修改将由客户端的 Javascript 完成 - 在这种情况下，由 success handler。

成功处理程序是一个客户端 Javascript 回调函数，它将接收来自您的服务器函数 items() 的异步响应。

客户端对服务器端函数的调用是异步的：在 浏览器请求服务器运行函数 doSomething()， 浏览器立即继续下一行代码，无需等待 回复。

这意味着无需等待调用服务器函数的返回码……浏览器继续运行。您将在此示例中看到这一点，因为“更多正在加载...”文本显示在 google.script.run 调用之后，但在收到响应之前。

如果items() 需要做一些更高级的事情……比如从电子表格中读取信息，该怎么办？继续并更改它...只需确保您 return 要显示的文本，并且您返回的内容将是有效的 HTML（因此 innerHTML 操作是可以的）。

代码.gs

function doGet() {
    return HtmlService.createHtmlOutputFromFile('index');
}

function items() {
  Utilities.sleep(5000);   // Added to allow time to see the div content change
  var exmp = 45;
  return( "You have " + exmp + " items" );    
}

index.html

<div id="test">Loading...</div>

<script type="text/javascript">
  function onSuccess(items) {
    document.getElementById('test').innerHTML = items;
  }

  google.script.run.withSuccessHandler(onSuccess).items();

  document.getElementById('test').innerHTML = "More loading...";
</script>

Answer 2

您首先需要使用 createHTMLOutput 函数创建 HTML 为了让你附加字符串，你必须使用 var.append 方法

function items(){
  var email = Session.getActiveUser().getEmail();

  var output = HtmlService.createHtmlOutput(email);
  var string1 = HtmlService.createHtmlOutput('<p>You have </p>')
  string1.append(output);
  string2= HtmlService.createHtmlOutput('<p> items</p>')
  string1.append(string2);
  Logger.log(string1.getContent());
}

Reference