JS / 以Google sheets作為資料庫，透過Google Apps Script製作查詢頁面 修改版3 番外 引用 firebase

JS / 以Google sheets作為資料庫，透過Google Apps Script製作查詢頁面 修改版3 番外 引用 firebase

Post Views: 3,500

JS / 以Google sheets作為資料庫，透過Google Apps Script製作查詢頁面 修改版 系列 的查詢頁面

所引入的 js 跟 css

都是在後端的程式碼.gs

利用自訂的函數include 使用GAS內建函數 HtmlService.createHtmlOutputFromFile(filename).getContent() 來取得專案中的html檔案內容

然後再利用<?!= ?>標籤來引入與執行後端程式碼 include(filename)，這樣就會將指定的html檔案內容輸出到index.html內

這也是為什麼 js 或 css  的內容必須包在html標籤<script></script> 或<style></style>之內

//讓前端可以載入 css js
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
<?!=include(style.css) ?>

不過也可以直接使用<?!= ?>標籤來引入GAS程式碼

也就是在index.html頁面直接用 <?!= HtmlService.createHtmlOutputFromFile(“style.css”).getContent(); ?>來引入js 或css檔案

例如：

<?!= HtmlService.createHtmlOutputFromFile("style.css").getContent(); ?>

後來在使用firebase的過程中發現在修改讀取權限之後是可以透過網址連結檔案

在firebase Storage的Files中可以取得檔案的連結

例如：

https://firebasestorage.googleapis.com/v0/b/upload-2a184.appspot.com/o/style.css?alt=media&token=9e31859f-0cb9-428f-9b37-81a5210bc5fb&_gl=1*y1mbre*_ga*MTk4NDQ3MTM3My4xNjkzODg5NDcw*_ga_CW55HF8NVT*MTY5NzEwMjE0Ny4xNi4xLjE2OTcxMDM3MzEuNjAuMC4w

因為已經開放讀取權限，所以token是可以移除

不過 ?alt=media 是不能移除的，一定要帶有這個參數才能讀取檔案內容

所以原本引用的css可以改成

<link rel="stylesheet" href="https://firebasestorage.googleapis.com/v0/b/upload-2a184.appspot.com/o/style.css?alt=media">
Tags: