如何鏈接谷歌網站上的谷歌應用程序腳本

Question

我正在爲我的公司創建一個谷歌網站，我正在利用谷歌應用程序腳本在網站上做一些額外的工作。我真的很想將腳本鏈接到我製作的下拉菜單。但是，我無法弄清楚如何鏈接腳本。我知道如何將腳本鏈接爲Google小工具和獨立鏈接，但我真的希望在我點擊下拉菜單中的項目時運行腳本。

Answer 1

出於安全原因，Google不允許您將JavaScript放入Google協作平臺。 他們提供的應用程序腳本，而是因爲他們在一個孤立的世界（服務器上而不是瀏覽器）工作，其非常棘手，並有其方法。

因爲它與標準頁面的JavaScript非常不同，所以您必須根據Apps腳本允許的方式重新考慮您的目標。

通過Google Apps腳本，您可以構建用戶界面（使用其實驗性UI API），該界面可以在整個頁面中作爲獨立腳本可視化，也可以在站點中的iframe中插入。這意味着您將不會有與您的網站重疊的下拉菜單：您需要一個靜態空間來可視化您的腳本的用戶界面。

還有另一種更原始​​的方式來在站點中「嵌入」腳本命令：使用鏈接。即使使用自己的參數也會觸發腳本的鏈接，僅用於運行de命令，但沒有任何UI。您可以製作帶有選項的菜單，每個菜單都會觸發一個腳本。但我不是在談論下拉菜單。

關於谷歌Apps腳本的用戶界面

• https://developers.google.com/apps-script/guide_user_interfaces
• https://developers.google.com/apps-script/guide_gui_builder
• https://developers.google.com/apps-script/service_ui

Answer 2

不知道你的 「鏈接腳本」 的意思，你有代碼某處其他？通過「鏈接」，您聽起來像是在用事件處理程序「調用」代碼。我將向您展示如何使用由GUI ListBox Change事件或Button Click事件觸發的ServerHandler調用函數。

在Google Apps腳本（GAS）中，有三種方法可以執行GUI。

• HTML Service - 很像普通的HTML，您可以插入HTML表單和輸入標籤。
• UI Service - 很像java（就佈局管理器而言），請參見下文。
• GUI Builder - 我建議先手動做，以便更好地理解佈局。

在Google協作平臺中，您可以直接添加大多數HTML而無需腳本。 UI服務和GUI生成器會爲你生成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（）添加每個元素並返回應用程序;在doGet和每個處理函數的末尾。

處理程序執行JavaScript onClick（）或onChange（）函數的函數，大多數UI在沒有處理程序的情況下無用。 ClientHandler效率更高，但ServerHandler做的更多，從ServerHandler開始，任何簡單的函數都可以轉換爲ClientHandler以獲得更好的性能。您可以選擇將處理程序分隔出來，或者將其全部編碼到一行代碼中，這實際上是個人喜好的問題，但是如果您計劃將它用於多個GUI對象，請將其分配給一個變量。您可能希望查看不同的佈局管理器以製作更多花哨的應用程序，或者只使用GUI Builder。還有用於其他創建功能，如app.createServerClickHandler（），但我知道這些是無用的，現在已被棄用，所以忽略任何其他引用，你會發現，但我們仍然使用addChangeHandler（）和addClickHandler（）GUI元素他們自己。

setName（）似乎很愚蠢，只需要設置參數名稱（我希望它們改變了這一點），所以現在我建議將它設置爲與元素ID相同。我還製作了處理程序的變量名稱= id =事件函數名稱，以說明它們是如何相關的。