时间戳

首页 > 解决方案 > Google Apps Scripts WebApps 的 Javascript 限制？

javascript - Google Apps Scripts WebApps 的 Javascript 限制？

问题描述

来帮助我在这里突破界限......

Google支持将您的 Javascript 粘贴到 html 文件中。这个人展示了如何在一个用谷歌脚本完成的 web 应用程序中显示图像。那家伙使 those images have s3x（我的意思是，在这里给我一个更好的描述！）

位于 Code.gs 中 Google Drive 中的图像的设置变量以及稍后尝试在 javascript 文件中使用它们不起作用。我得到一个空白屏幕。

这是 Google 的限制还是我的 Javascript 知识限制？

这是我映射两个图像的代码点js。

代码.gs

这显示了我们看到的html

页面.html

这就是魔法发生的地方......

Javascript.html

的CSS....

的CSS

标签： javascriptgoogle-apps-scriptweb-applications

解决方案

问题：

您在您的 Code.gs 中进行了实例化pic1，并且pic2当您在 HTML/JavaScript 文件中时期望具有这些值，但情况并非完全如此。

解决方案：

要将值从服务器端传递到客户端，请使用google.script.run。您可以直接调用get_the_images而不是将其实例化为变量然后传递它们。请参阅下面的示例代码，了解如何将值从 GS 传递到您的 HTML/JavaScript。

代码.gs：

function doGet() {
  var htmlOutput = HtmlService.createTemplateFromFile('Page');
  return htmlOutput.evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function get_the_images() {
  // supposedly ID of said images (IDs for test purposes)
  return ['rxcmaiw_23jsu', 'qwejiasd23saf'];
}

页面.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    value of pic1 id is:
    <span id="pic1">
    </span>
    </br>
    value of pic2 id is:
    <span id="pic2">
    </span>

    <?!= include('Javascript'); ?>
  </body>
</html>

Javascript.html：

<script>
  let span1 = document.querySelector('#pic1');
  let span2 = document.querySelector('#pic2');
  // call get_the_images function from Code.gs
  google.script.run.withSuccessHandler(onSuccess).get_the_images();

  function onSuccess(result){
    // result contains the return value of get_the_images
    var [pic1, pic2] = result;
    // at this point, pic1 and pic2 contains the ids
    // show them as images using your script
    // below just confirms the IDs if passed properly
    span1.innerHTML = pic1;
    span2.innerHTML = pic2;
  }
</script>

输出：

输出

参考：

推荐阅读