我希望 Google 表格側邊欄以單元格 Sheet1:A1 中設定的顏色打開。我當前的代碼有效（我懷疑可能有更有效的方法來做到這一點），但是 CSS 會逐步遍歷根目錄中的每個主題，直到它落在正確的主題上。
例如，如果 A1 設定為“橙色”，則呼叫側邊欄將首先將正文加載為“默認”，然后切換為“橙色”。有沒有辦法在初始頁面加載時加載正確的根主題，而不是單步執行根中的主題？
Google Apps 腳本
function onOpen(e) {
SpreadsheetApp.getUi()
.createMenu("Sidebar")
.addItem("Show sidebar", "showSidebar")
.addToUi();
}
function showSidebar() {
var htmlWidget = HtmlService.createTemplateFromFile('Test').evaluate()
.setTitle("Theme Test");
SpreadsheetApp.getUi().showSidebar(htmlWidget);
}
function getColorTheme() {
colorTheme = SpreadsheetApp.getActive().getRange("Sheet1!A1").getDisplayValue();
return colorTheme;
}
側邊欄的 HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
:root,
:root.Default {
--bg-color: #45818e;
}
:root.Orange {
--bg-color: #e69138;
}
body {
background-color: var(--bg-color);
}
</style>
<script>
function setTheme(colorTheme) {
document.documentElement.className = colorTheme;
}
</script>
</head>
<body>
<p>Hello world</p>
<script>
google.script.run.withSuccessHandler(setTheme).getColorTheme();
</script>
</body>
</html>
uj5u.com熱心網友回復：
從您的情況來看，以下模式如何？
模式一：
在此模式中，HTML 使用 Google Apps 腳本修改，修改后的 HTML 與HtmlService.createHtmlOutput().
Google Apps 腳本方面：
function showSidebar() {
var colorTheme = SpreadsheetApp.getActive().getRange("Sheet1!A1").getDisplayValue();
var html = HtmlService.createHtmlOutputFromFile('Test').getContent().replace("{{colorTheme}}", colorTheme);
var htmlWidget = HtmlService.createHtmlOutput(html).setTitle("Theme Test");
SpreadsheetApp.getUi().showSidebar(htmlWidget);
}
HTML 方面：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
:root,
:root.Default {
--bg-color: #45818e;
}
:root.Orange {
--bg-color: #e69138;
}
body {
background-color: var(--bg-color);
}
</style>
<script>
document.documentElement.className = "{{colorTheme}}";
</script>
</head>
<body>
<p>Hello world</p>
</body>
</html>
模式二：
在此模式中，HTML 使用 HTMl 模板修改，修改后的 HTML 與HtmlService.createHtmlOutput().
Google Apps 腳本方面：
function ashowSidebar() {
var colorTheme = SpreadsheetApp.getActive().getRange("Sheet1!A1").getDisplayValue();
var htmlWidget = HtmlService.createTemplateFromFile('Test')
htmlWidget.colorTheme = colorTheme;
SpreadsheetApp.getUi().showSidebar(htmlWidget.evaluate().setTitle("Theme Test"));
}
HTML 方面：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
:root,
:root.Default {
--bg-color: #45818e;
}
:root.Orange {
--bg-color: #e69138;
}
body {
background-color: var(--bg-color);
}
</style>
<script>
document.documentElement.className = "<?= colorTheme ?>";
</script>
</head>
<body>
<p>Hello world</p>
</body>
</html>
筆記：
從最近對HTML模板的benchmark來看，現階段的處理成本似乎
evaluate()有點高。參考所以，我提出了上述兩種模式，有無 HTML 模板。在這種情況下，
<html >也許<html >可以使用 Javascript 來代替。但是，我不確定你的實際情況。因此，在這個答案中，Javascript 被用作示例修改。
參考：
- createHtmlOutput(html)
- HTML 服務：模板化 HTML
- createTemplateFromFile(檔案名)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516878.html