Question

假设我们有一个变量。此变量是在谷歌应用程序脚本中创建的。在该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操作正常）。

Code.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

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

2 个答案:

Code.gs

的index.html