Question

由于在谷歌应用程序中禁止操纵剪贴板，我想通过使用Clipboard.js库找到解决方法。

我的问题是：

1。我应该如何将Clipboard.js库导入Google App Script？

2。以及如何调用其他页面中的函数（例如，尝试从index.html中的BMI.gs调用函数calculateWeight（）？

我尝试过的事情：

我试图将Clipboard.js的源代码粘贴到名为Clipboard.js.html的文件中，并将所有内容都放在标记内。

我想要实现的目标：

复制文本字符串，然后单击＆＃34; COPY＆＃34;按钮。

>>what I want to achieve

我花了几个小时寻找解决方案，但仍无法找到相关信息。任何帮助将不胜感激。谢谢！

Answer 1

您的脚本可以包含多个html文件，并且根据HTML Services: Best Practices，您应该将HTML，CSS和（客户端）Javascript放在单独的文件中。因此，在您的情况下，您的index.html文件将是所有HTML代码，并将添加几行。它可以如下所示开始：

<!DOCTYPE html>
<html>
  <head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>
    <?!= include('myCSS'); ?>
    <title>Give it a Title</title>
  </head>
  <body>
      ...
      All the Body stuff
      ...
  </body>
    <?!= include('myScript'); ?>
</html>

在此顶部是一个包含来自托管位置的剪贴板JS的行。我发现通过网络搜索clipboard.js。这是我可以访问clipboard.js库的地方下面有一行：

<?!= include('myCSS'); ?>

在服务器端文件（.gs文件）中，我有以下内容，以便我可以在我的doGet（）函数中加载其他HTML文件：

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

我正在使用此代码在我的doGet中加载HTML以使用模板化HTML：

function doGet(passed) {

  if(passed.parameter.festival && passed.parameter.year){
    passedParameter = passed.parameter.festival + ' ' + passed.parameter.year;
  }

  var result=HtmlService.createTemplateFromFile('index').evaluate()
        .setTitle('My Title')
        .setWidth(1285)
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

  return result;
}

在File下拉菜单中，您将创建一个名为myCSS的新HTML文件，并在其中添加CSS：

<style>
  h1 {
     color: #0F6B5E;
     font-size: 300%;
     text-align:center;
     vertical-align: middle;
     font-family: 'Raleway', sans-serif;
     font-weight:bold;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
  }
</style>

创建一个名为myScript的新HTML文件，并在此处添加您要在HTML页面中使用的screipt。这是客户端脚本，而不是SErver Side脚本，它位于脚本文件中。（HTML文件将在文件列表中显示.html扩展名，而服务器端脚本文件将具有.gs）如果您的calculateWeight（）函数用于计算和显示HTML页面中的项目，则将其放在此文件中： / p>

<script>
  //Script to load after the page has loaded
  $(function() {
  google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
      });

  calculateWeight() {
    //code goes here
  }

function showMenuYear(menuItems) {
  var list = $('#optionListYear');
  var desiredValue = '<?!= passedParameter ?>';

  list.find('option').remove();  // remove existing contents

  list.append('<option value="-1">Select a Festival and Year</option>');

  for (var i = 0; i < menuItems.length ; i++) {
    list.append('<option value=' + menuItems[i].sheetrow + '>' + menuItems[i].fullFestival + '</option>');
    if (menuItems[i].fullFestival === desiredValue){
      list.val(menuItems[i].sheetrow);
    }
  }

  setFormList();

}
function setFormList() {
//    alert('In setFormList ');
//    alert($('#optionListYear').val());

  var replacement = document.getElementById("OverallGrid");
  replacement.innerHTML = "Retrieving Registrations...";

  if ($('#optionListYear').val() === "-1") {
//    if(passedData.year && passedData.festival){replacement.innerHTML = passedData.festival & " " & passedData.year;};
    replacement.innerHTML = "Select a Festival/Year above.";
    return;
  }
  google.script.run.withSuccessHandler(showRegistrationsTable).withFailureHandler(loadFailed).getValidRegistrations($('#optionListYear').val());
  }

  function loadFailed(error){
    var replacement = document.getElementById("OverallGrid");

    var displayMessage = "Error loading data: " + error.name + ' ' + error.message;

    if (error.message.includes("is missing (perhaps it was deleted?)") ) {
      displayMessage = "You do not have access to these registrations." 
    }

    replacement.innerHTML = displayMessage;

  }
</script>

在此代码中，以google.script.run开头的行将运行服务器端函数，并在需要时将变量传递给函数。如果成功，则withSuccessHandler(successFunction)中定义的客户端功能将与传递的任何返回数据一起使用。因此，在我的示例中，showMenuYear(menuItems)函数在客户端运行， menuItems 设置为服务器端函数getDropDownContent()的返回值。如果服务器端返回错误，则执行loadFailed(error)功能。这一切都来自这条线：

google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();

如何将Clipboard.js库导入Google App Script？

1 个答案: