Question

我正在尝试创建动态应用程序脚本组件，这些组件可以添加到我的站点中，并为每个脚本实例提供动态数据。我尝试过做参数，但我不确定这是否是解决这个问题的最好方法。例如，我想创建一个加载动态链接的图像脚本，并插入到谷歌网站中。我只希望一个图像脚本可以多次加载到带有动态网址的页面中。我该怎么处理？可以这样做吗？感谢。

Answer 1

此版本创建滚动图像显示或幻灯片放映。它在一个空的div中创建了图像标签。您可以向电子表格的A列添加任意数量的图像，脚本将完成剩下的工作。

image.html：

''

Code.gs

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="myimages"></div>
  <div id="slideshow" style="display:none;">
    <img id="slide" src="" width="450"/>
  </div>
  <input type="button" value="Start Slide Show" onClick="startShow();" />
  <input type="button" value="Stop Show" onClick="stopShow();" />
  <div id="resp" style="display:none;">
    <h1>Response</h1>
    <p>Your data has been received.</p>
  </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      var nextslide=0;
      var myslides='';
      var mytimer;
      $(function() {
        google.script.run
          .withSuccessHandler(setURL)
          .getURL();
      });
      function setURL(urlA)
      {
        for(var i=0;i<urlA.length;i++)
        {
          var s='img' + Number(i+1);
          var s1= '#img' + Number(i+1);
          $('#myimages').append('<img id="' + s + '" src="' + urlA[i] + '" />');
          $(s1).attr('height','450');
        }
        myslides=urlA;
      }

      function startShow()
      {
        $('#myimages').css('display','none');
        $('#slideshow').css('display','block');
        showSlide();
      }

      function showSlide()
      {
        document.getElementById('slide').src=myslides[nextslide];
        if(++nextslide > myslides.length-1)
        {
            nextslide=0;
        }
        mytimer=window.setTimeout(showSlide,5000);
      }

       function stopShow()
       {
         window.clearTimeout(mytimer);
         $('#myimages').css('display','block');
        $('#slideshow').css('display','none');

       }

      function loadTxt(from,to)
      {
          document.getElementById(to).value = document.getElementById(from).value;
      }

     console.log('My Code');
   </script>
  </body>
</html>

Answer 2

这是一个简单的例子：

image.html文件：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="data">
    <br /><img id="img1" src="" alt="img1" width="300" />
    <br /><img id="img2" src="" alt="img2" width="300" />
  </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(function() {
        google.script.run
          .withSuccessHandler(setURL)
          .getURL();
      });
      function setURL(urlA)
      {
         for(var i=0;i<urlA.length;i++)
         {
           var s='img' + Number(i+1);
           document.getElementById(s).src=urlA[i];
         }
      }
     console.log('My Code');
   </script>
  </body>
</html>

Code.gs文件：

function doGet()
{
  var html = HtmlService.createHtmlOutputFromFile('image');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)

}

function getURL()
{
  var ss=SpreadsheetApp.openById('id');
  var sht=ss.getSheetByName('imgURLs');
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  var urlA=[];
  for(var i=1;i<rngA.length;i++)
  {
    urlA.push(rngA[i][0]);
  }
  return urlA;
}

这会从名为＆＃39; imgURLs＆＃39;的工作表中获取图片网址。使用相应的电子表格ID，我只使用A列（现在只使用A2和A3，但您可以使用1个或更多图像。您可以保存为webapp并转到经典网站选择插入谷歌应用程序和从发布菜单中输入网络应用程序网址即可。

Answer 3

转到管理网站 - ＆gt; Apps脚本将新脚本嵌入到您的经典网站中。

创建一个新函数来构建您需要的动态html

function makePage() {
  var page = SitesApp.getCurrentPage();
  //create your html
  page.setHtmlContent()
}

添加一个调用makePage（）
的doGet方法
```
function doGet(e) {
  makePage();
}
```
将脚本发布为Web应用程序，将脚本设置为以您的身份运行。获取脚本的URL。
有许多方法可以强制从您的页面执行此代码。一种机制是在“站点”页面上插入对App Script的调用。在小工具向导中提供App Script Web应用程序的URL。

如何使用适用于Google协作平台的Google App Scripts创建动态组件？

3 个答案: