首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何将Clipboard.js库导入Google?

如何将Clipboard.js库导入Google?
EN

Stack Overflow用户
提问于 2017-08-11 05:53:03
回答 1查看 640关注 0票数 4

由于Google中禁止操作剪贴板,所以我想通过使用Clipboard.js库找到一个解决办法。

我的问题是:

1.如何将Clipboard.js库导入到Google?

2.以及如何调用其他页面中的函数(例如。尝试从calculateWeight?中的BMI.gs调用函数index.html()

我试过的是:

我尝试将Clipboard.js的源代码粘贴到一个名为Clipboard.js.html的文件中,并将所有内容放入标记中。

我想要的是:

点击“复制”按钮复制文本字符串。

>>what I want to achieve

我花了几个小时寻找解决方案,但仍然找不到相关的信息。任何帮助都将不胜感激。谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-11 11:02:47

您的脚本可以有多个HTML文件,并且根据HTML服务:最佳实践,您应该将html、CSS和(客户端) Javascript放在单独的文件中。因此,在您的例子中,您的index.html文件将是所有的HTML代码,并将添加几行。它可以从以下开始:

代码语言:javascript
复制
<!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库的地方,在下面有一行:

代码语言:javascript
复制
<?!= include('myCSS'); ?>

在服务器端文件(.gs文件)中,我有以下内容,以便可以从我在doGet()函数中加载的文件中包含其他HTML:

代码语言:javascript
复制
function include(filename) {
  return HtmlService.createTemplateFromFile(filename).evaluate()
      .getContent();
}

我使用以下代码在doGet中加载HTML以使用模板HTML:

代码语言:javascript
复制
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;
}

在“文件下拉”下,创建一个名为“myCSS”的新HTML文件,并在那里添加CSS:

代码语言:javascript
复制
<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页面中使用的屏幕。这是客户端脚本,而不是SErver侧脚本,后者都在脚本文件中。(HTML将在文件列表中显示.html扩展名,而服务器端脚本文件将具有.gs)如果您的calculateWeight()函数用于计算和显示HTML页面中的项,则将其放在此文件中:

代码语言:javascript
复制
<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)函数。这一切都来自于这句话:

代码语言:javascript
复制
google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45627864

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档