【发布时间】：2012-01-20 03:09:53
【问题描述】：
我正在为我的公司创建一个谷歌网站，并且我正在利用谷歌应用程序脚本在该网站上做一些额外的事情。我真的很想将脚本链接到我制作的下拉菜单。但是，我不知道如何链接脚本。我知道如何将脚本链接为 google 小工具和独立链接，但我真的希望在单击下拉菜单中的项目时运行脚本。
【问题讨论】：
标签： hyperlink google-apps-script google-sites
【发布时间】：2012-01-20 03:09:53
【问题描述】：
出于安全原因，Google 不允许您将 javascript 放入 Google 协作平台。 相反，它们提供了 Apps 脚本，但由于它们在一个孤立的世界中工作（在服务器上而不是在浏览器上），所以它非常棘手并且有其方法。
由于它与标准页面的 javascript 非常不同，因此您必须重新考虑您的目标，即 Apps 脚本可以让您做什么。
Google Apps 脚本可让您构建一个用户界面（使用其尚处于试验阶段的 UI API），该界面可以在整个页面中可视化为独立脚本，也可以插入到协作平台的 iframe 中。这意味着您不会有一个与您的网站重叠的下拉菜单：您需要一个静态空间来可视化脚本的 UI。
还有另一种更原始的方式可以将脚本命令“嵌入”到您的站点中：使用链接。触发脚本的链接，即使使用您自己的参数，也只能运行 de 命令，但没有任何 UI。您可以制作一个带有选项的菜单，每个选项都会触发一个脚本。但我不是在谈论下拉菜单。
关于 Google Apps 脚本用户界面
【讨论】：
不确定您所说的“链接脚本”是什么意思，您在其他地方有代码吗？通过“链接”，听起来您的意思是使用事件处理程序“调用”代码。我将向您展示如何使用由 GUI 列表框更改事件或按钮单击事件触发的 ServerHandler 调用函数。
在 Google Apps Scrips (GAS) 中，有三种方法可以实现 GUI。
- HTML Service - 很像纯 HTML，您可以插入 HTML 表单和输入标签。
- UI Service - 很像 java（就布局管理器而言），见下文。
- GUI Builder - 我建议先手动执行以更好地理解布局。
在 Google 协作平台中，您无需脚本即可直接添加大部分 HTML。 UI Service 和 GUI Builder 将为您生成 HTML 表单标签，并且由于很少有任何理由插入 GUI 元素，除非您正在执行一些您可能想要开始使用这些代码的代码。
Here is a Drop-Down list example进行了一些更改，以显示如何从多个 UI 元素（有时称为小部件）调用处理函数以及如何使用参数：
function doGet(e) { // use doGet() & UiApp to make a canvas.
var app = UiApp.createApplication();
var doEvent = app.createServerHandler('doEvent').setId('doEvent');
var myList = app.createListBox().setId('myList').setName('myList');
myList.addItem('one'); // add items, I use single quote strings.
myList.addItem('two').addItem('three') // I know it looks weird.
// Scripts let you do this, by returning self for your convenience.
.addChangeHandler(
app.createServerHandler('doEvent')
);
app.add(myList); // Add element to GUI.
doEvent.addCallbackElement(myList); // Add to Event Handler.
app.add(app.createButton('Click Me').setId('myButton')
.addClickHandler(doEvent));
return app;
} // Simple DropDown by Jason K.
function doEvent(e) { // use split() if isMultipleSelect is true
var app = UiApp.getActiveApplication();
app.add(app.createLabel(
'List Value is ' + e.parameter.myList
+ ' from ' + e.parameter.source));
return app;
}
至于故障排除，请记住使用 app.add() 添加每个元素并返回 app；在 doGet 和每个处理函数的末尾。
处理程序执行类似 JavaScript 的 onClick() 或 onChange() 函数，大多数 UI 没有处理程序就没有用处。 ClientHandler 效率更高，但 ServerHandler 做得更多，从 ServerHandlers 开始，任何简单的功能都可以转换为 ClientHandlers 以获得更好的性能。您可以选择分隔处理程序或将其全部塞入一行代码，这实际上是个人喜好问题，但是如果您打算将它用于多个 GUI 对象，请务必将其分配给一个变量。您可能想要查找不同的布局管理器以制作外观更精美的应用程序，或者只使用 GUI Builder。还有其他创建函数，例如 app.createServerClickHandler()，但我知道这些函数没用，现在已弃用，因此请忽略您发现的任何其他类似的引用，但是我们仍然使用 addChangeHandler() 和 addClickHandler() 到 GUI 元素自己。
setName() 看起来很傻，只需要设置参数名称（我希望他们改变它）所以现在我建议将它设置为与元素 id 相同。我还让 Handler 的变量名 = 它的 id = 事件函数名，只是为了说明它们之间的关系。
【讨论】：