我正在尝试创建可以添加到我的站点的动态应用程序脚本组件，其中包含每个脚本实例的动态数据。我尝试做参数，但我不确定这是否是解决这个问题的最佳方法。例如，我想创建一个加载动态链接并插入谷歌网站的图像脚本。我只希望一个图像脚本可以多次加载到带有动态 url 的页面中。我该如何处理？这可以做到吗？谢谢。
【问题讨论】：
标签： javascript jquery google-apps-script google-sites
此版本创建滚动图像显示或幻灯片放映。它会在一个空的 div 中创建图像标签。您可以在电子表格的 A 列中添加任意数量的图像，其余的由脚本完成。
image.html:
<!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>
代码.gs
function doGet()
{
var html = HtmlService.createHtmlOutputFromFile('image');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getData(a)
{
var ts = Utilities.formatDate(new Date(), "GMT-6", "yyyy-MM-dd' 'HH:mm:ss");
a.push(ts);
var ss=SpreadsheetApp.openById('SS_ID')
ss.getSheetByName('Form Data').appendRow(a);
return true;
}
function getURL()
{
var ss=SpreadsheetApp.openById('SS_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;
}
【讨论】：
创建一个新函数来构建你需要的动态html
function makePage() {
var page = SitesApp.getCurrentPage();
//create your html
page.setHtmlContent()
}
添加一个将调用 makePage() 的 doGet 方法
function doGet(e) {
makePage();
}
将您的脚本发布为 Web 应用程序，设置脚本以您的身份运行。获取脚本的 url。
有多种方法可以强制从您的页面执行此代码。一种机制是在您的站点页面上插入对 App 脚本的调用。在小工具向导中提供您的 App Script Web 应用的 URL。
【讨论】：
这是一个简单的例子：
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;
}
这会从名为“imgURLs”的工作表中获取具有适当电子表格 ID 的图像 url，我只使用 A 列（现在只使用 A2 和 A3，但您可以使用 1 个或多个图像。您可以保存为webapp 并转到经典站点选择插入 google 应用程序并从发布菜单中输入 web 应用程序 url，就是这样。
【讨论】：