Gg / 如何讓Google Apps Script部署的程式接收url參數並呈現內容在網頁中

Gg / 如何讓Google Apps Script部署的程式接收url參數並呈現內容在網頁中

Post Views: 3,455

Google Apps Script(GAS)程式可以部署成網頁應用程式

這時候會取得一個網頁應用程式的連結，例如：https://script.google.com/macros/s/**********************/exec

可以直接透過這個網頁連結帶入url參數，例如：https://script.google.com/macros/s/**********************/exec?A=a&B=b~~

將參數傳後端程式進行處理，也可以再回傳顯示在前端網頁中

不過GAS預設是不能將程式嵌入其他網站

必須在GAS後端程式中對於用來嵌入的Html新增一個HtmlService.XFrameOptionsMode.ALLOWALL(下面的紅字部分)

var output = HtmlService.createTemplateFromFile("url").evaluate().setTitle("查詢系統");
output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);//可以將發布成html介面的程式 崁入其他網站
return output;

整體程式分為兩個部分

Google Apps Script的程式碼(後端)

function doGet() {
var output = HtmlService.createTemplateFromFile("url").evaluate().setTitle("查詢系統");
output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);//可以將發布成html介面的程式 崁入其他網站
return output;
}

function searchData(u){
Logger.log(u);
return u;
}

網頁Html的程式碼(前端)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1 id="m"></h1>

  </body>
  <script>

    google.script.url.getLocation(function(u) {
       var param =u.parameter;
       google.script.run.withSuccessHandler(showData).searchData(param);//後端執行searchData  回傳值到showData
      });    
    
    var h1String = document.getElementById("m");
    var message="";
    function showData(u){
      console.log(u);
      console.log(u.uid);
      
      if(u.uid !== undefined ){
        message="" ;
        h1String.innerHTML = "";
        
        //console.log(message);
        console.log(u.uid);
        console.log(typeof(u.uid));
        if(u.uid =="m1"){        //
          
          message="數學";
          console.log("1");
          console.log(message);
        }else if(u.uid =="e1"){

          message ="英文";       //
          console.log("2");
          console.log(message);

        }else{
          message ="其他";
          console.log("3");
          console.log(message);
        }
        
        h1String.innerHTML = message;
      }else{
        h1String.innerHTML = "空值";
      }
    }
 
    
  </script>
</html>

 

設計概念

因為GAS的網頁應用程式可以透過 POST / GET 方法傳入資料

如果要接收外部參數，後端程式必須要有相對應的 doPost() 或者 doGet() 來處理資料

這個是GAS將程式部署成網頁應用程式的必要設定

同時也要將引入要顯示的Html內容(前端)，這樣就可以執行在前端的JavaScript程式

也就是Html內容(前端)第12行開始的google.script.url.getLocation

 

在後端的searchData(u)則是配合Html中的google.script.run.withSuccessHandler(showData).searchData(param)

將透過前面GAS的內部程式 google.script.url.getLocation取得網址參數param 傳到在後端的searchData(u)，

然後再從後端回傳到前端的showData(u)進行處理

其實傳到後端之後就可以在GAS做很多處理

只是這邊沒有，單純再回傳到前端而已

 

以下是測試結果

https://script.google.com/macros/s/AKfycbxQ7k2oXw1xCLiYBhyGLllcaxvaTwGEW-Q4hoIbiu6fFnO16DQ4A9fihx9LOnYUNyYU/exec

沒有帶參數，顯示”空值”

https://script.google.com/macros/s/AKfycbxQ7k2oXw1xCLiYBhyGLllcaxvaTwGEW-Q4hoIbiu6fFnO16DQ4A9fihx9LOnYUNyYU/exec?uid=m1

uid=m1，顯示”數學”

參數對應程式設定，可以顯示想要的文字

這邊只是簡單利用帶參數的連結，配合程式再回傳設定的文字在網頁中

也可以直接使用AJAX

將HTTP呼叫的程式寫在特定的網頁之中，將參數傳入GAS網頁應用程式，在後端處理之後再回傳到前端

這樣就不需要在GAS撰寫前端Html內容了

這個部分可以參考彰化一整天的範例

 

Tags: