由于Google中禁止操作剪贴板,所以我想通过使用Clipboard.js库找到一个解决办法。
我的问题是:
1.如何将Clipboard.js库导入到Google?
2.以及如何调用其他页面中的函数(例如。尝试从calculateWeight?中的BMI.gs调用函数index.html()
我试过的是:
我尝试将Clipboard.js的源代码粘贴到一个名为Clipboard.js.html的文件中,并将所有内容放入标记中。
我想要的是:
点击“复制”按钮复制文本字符串。
我花了几个小时寻找解决方案,但仍然找不到相关的信息。任何帮助都将不胜感激。谢谢!
发布于 2017-08-11 11:02:47
您的脚本可以有多个HTML文件,并且根据HTML服务:最佳实践,您应该将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;
}在“文件下拉”下,创建一个名为“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页面中使用的屏幕。这是客户端脚本,而不是SErver侧脚本,后者都在脚本文件中。(HTML将在文件列表中显示.html扩展名,而服务器端脚本文件将具有.gs)如果您的calculateWeight()函数用于计算和显示HTML页面中的项,则将其放在此文件中:
<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();https://stackoverflow.com/questions/45627864
复制相似问题