在Google App脚本中将变量显示为html吗? [英] Display variable as html in Google App Script?

问题描述

假设我们有一个变量.此变量是在Google应用脚本中创建的.在该应用程序脚本项目中，您有两个文件.首先，.gs文件，变量来自哪里.接下来，您有了html文件.您如何将变量传输到html?

Let's say we have a variable. This variable was created in google app script. On that app script project, you have two files. First, the .gs file, where the variable came from. Next, you have the html file. How do you transfer the variable to 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>

但是，这不起作用.我该如何进行这项工作?

However, this doesn't work. How can I make this work?

推荐答案

如果您仔细阅读了私有功能"部分，您会发现一个几乎可以完全按照您的意图进行操作的示例.下面的代码使该示例适合您的示例.

If you read over the Private Functions section of the HTML service documentation, you'll find an example that does almost exactly what you're trying. The code below adapts that example to yours.

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

You need to keep the GAS server stuff separate from the HTML client stuff. For example, document.getElementById("test").innerHTML = ... means nothing in the context of the server / GAS code. Instead, the modification of the document will be done by Javascript on the client side - in this case, by a success handler.

成功处理程序是客户端Javascript 回调函数，它将从服务器函数items()接收异步响应.

A success handler is a client-side Javascript callback function that will receive the asynchronous response from your server function items().

客户端对服务器端函数的调用是异步的: 浏览器要求服务器运行功能doSomething()， 浏览器无需等待即可立即继续执行下一行代码 寻求回应.

Client-side calls to server-side functions are asynchronous: after the browser requests that the server run the function doSomething(), the browser continues immediately to the next line of code without waiting for a response.

这意味着无需等待从调用服务器函数返回的代码……浏览器一直在运行.在本示例中，您会看到此内容，因为在google.script.run调用之后但在收到响应之前会显示更多正在加载..."文本.

This means that there is no waiting for the return code from the call to your server function... the browser just keeps going. You'll see this in this example, as the "More loading..." text gets displayed after the google.script.run call, but before the response is received.

如果items()需要做一些更高级的操作，例如从电子表格中读取信息，该怎么办?继续进行更改...只要确保您要显示的文本为return，并且返回的内容将为有效的HTML(因此innerHTML操作就可以了).

What if items() needs to do something more advanced... like read info from a spreadsheet? Go ahead and change it... just make sure that you return the text you want displayed, and that what you're returning is going to be valid HTML (so the innerHTML operation is OK).

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>

这篇关于在Google App脚本中将变量显示为html吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！