我正在構建一個簽到表單，它將簽到資料傳遞到一個Google電子表格。該表單使用 CSS 和 Jquery 來構建元素的 UI 和互動性。CSS檔案使用了CSS變數，但這些變數仍被硬編碼到style.html檔案本身。我想從 Google Spreadsheet 本身的一個設定表中提取樣式資訊。
為了做到這一點，我正在嘗試一個名為customcss.html的檔案，它不是一個樣式檔案，而是一個腳本檔案，它為jquery寫了一個<style>標簽，以便在頁面加載后追加到head元素中。customcss.html檔案看起來是：
<script>
var sL = "<style>"/span>;
sL = ":root { --body-bg-color: " google.script.run。 withSuccessHandler(returnVal).getNamedRangeVal("body.bg.color") " ；";
sL = "-num-text-color: "/span> google.script.run。 withSuccessHandler(returnVal).getNamedRangeVal("num.text.color") "；" ;
sL = "-num-bg-color: "/span> google.script.run。 withSuccessHandler(returnVal).getNamedRangeVal("num.bg.color") "；" ;
.
.
.
sL = "}</style>"。
$("head").append（sL）。
</script>
為了從Sheet中提取資料，呼叫了函式getNamedRangeVal，它找到了傳遞給函式的定義的名稱范圍，并在單元格中讀取相應的值：
function getNamedRangeVal(nR) {
var ss = SpreadsheetApp.openByUrl（sheetURL）。
var ws = ss.getRangeByName（nR）.getValue（）。
return ws;
}
由于由getNamedRangeVal回傳的是我需要的資料，我需要成功處理程式returnVal能夠回傳一個值（因為通過google.script.run.呼叫的函式回傳void）；returnVal非常基本 - 它只是轉過來并傳遞回它所傳遞的東西：
function returnVal(v) {
return v。
}
問題是當腳本運行時，它確實附加了適當的<style>標簽，但是所有的變數值都是undefined，從我的初步調查來看，這似乎是由于google.script.run呼叫的異步性質。
那么，我應該怎樣做才能將資料從表單中獲取到回呼函式中以構建 CSS 腳本呢？
uj5u.com熱心網友回復：
問題和解決方案：
在客戶端（即網路瀏覽器）代碼中呼叫google.script.run，啟動指定的服務器端Apps Script函式。客戶端函式會立即繼續執行，而無需等待服務器端函式的完成。通常情況下，客戶端函式將在此時簡單地結束。
當服務器端函式最終完成時，withSuccessHandler 或withFailureHandler 所指定的函式將自動啟動，具體取決于服務器端函式是成功完成還是出現了錯誤。
因此，正如Kos 所說的那樣，您應該將 CSS 構建轉移到 withSuccessHandler 所呼叫的函式。
另一種方法是使用模板：
動態構建 CSS 的另一種方法是使用 模板化 HTML，它允許直接執行服務器端代碼，而無需使用google.script.run，而是通過 scriptlets。如果您想在頁面加載時將少量靜態資料帶到客戶端，這是一個有效的選擇（參見異步加載資料，而不是在模板中加載）。
請看一個簡化的例子，其中div元素的顏色是通過列印符號（<?= ?>）從服務器中帶來的：
index.html:
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
color: <?= myColor("color") ? > 。
background-color: <?= myColor("background-color") ?> 。
</style>
</head>
<body>
<div>這應該是彩色的</div>/span>
</body>
</html>/span>
Code.gs:
function doGet（）{
const output = HtmlService.createTemplateFromFile("index").evaluation()。
return輸出。
}
function myColor(prop) {
switch (prop) {
case "color"/span>:
return "blue";
case "background-color":
return "red"。
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318026.html
標籤：