HTML
探討在GAS中建立HTML網頁
主文件
index.html
網頁超連結
無法使用一般Web Server的寫法<a href=""...>...</a>，絕對找不到網頁，因為不是實體路徑。
必須以Javascript的函數，呼叫GAS的函數，取得GAS內部HTML網頁內容，回傳呼叫端網頁來顯示。
呼叫端HTML：在文字上onclick()
<label style="color: green;font-size: 20px;" class="link-label" onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'green'" onclick="loadContent('Home.html')">首頁</label>
<Script>函數
function loadContent(page) {
google.script.run.withSuccessHandler(function(content) {
document.getElementById('content').innerHTML = content;
}).getContent(page);
}
Code.gs
//讀取網頁
function getContent(page) {
var html = HtmlService.createTemplateFromFile(page).evaluate().getContent();
return html;
}
範例
程式碼.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
function getContent(page) {
var html = HtmlService.createTemplateFromFile(page).evaluate().getContent();
return html;
}
切割頁框範例
index.html：置中80%、左邊20%、右邊60%。
<!DOCTYPE html>
<html>
<head>
<title>代理代課甄試-index</title>
<base target="_top">
<script>
function loadLeftColumn(page) {
google.script.run.withSuccessHandler(function(content) {
document.getElementById('left-column').innerHTML = content;
}).getContent(page);
}
function loadContent(page) {
google.script.run.withSuccessHandler(function(content) {
document.getElementById('content').innerHTML = content;
}).getContent(page);
}
</script>
<script type="text/javascript">
window.onload=function(){
loadLeftColumn('left.html');
loadContent('Home.html');
}
</script>
</head>
<div align="center">
<body>
<table>
<tr width="80%">
<td width="20%" bgcolor="lightpink">
<p id="left-column"></p>
</td>
<td width="60%" bgcolor="lightgreen">
<p id="content"></p>
</td>
</tr>
</table>
</body>
</div>
</html>
導覽列及顯示頁以window.onload方式載入起始狀態。
left.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.link-label:hover {
cursor: pointer;
text-decoration: underline;
color: red !important;
}
</style>
<script>
function changeColor(element, color) {
element.style.color = color;
}
</script>
</head>
<body>
<label style="color: green;font-size: 20px;" class="link-label" onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'green'" onclick="loadContent('Home.html')">首頁</label><br>
<font style="color: black;">--- 報名程序 ---</font><br>
<label style="color: green;font-size: 16px;" class="link-label" onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'green'" onclick="loadContent('register.html')">註冊帳號/登入</label><br>
<label style="color: green;font-size: 16px;" class="link-label" onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'green'" onclick="loadContent('fillInfo.html')">填寫報名表</label><br>
<label style="color: green;font-size: 16px;" class="link-label" onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'green'" onclick="loadContent('fileUpload.html')">上傳2吋照片/匯款證明</label><br>
<font style="color: black;">--- 完成報名 ---</font><br>
<label style="color: green;font-size: 16px;" class="link-label" onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'green'" onclick="loadContent('printicket.html')">上傳2吋照片/列印甄試證</label>
</body>
</html>
Home.html
<!DOCTYPE html>
<html>
<head>
<title>代理代課甄試-Home</title>
</head>
<div align="center">
<body>
<!-- Home.html -->
<h1 style="color: darkgreen;font-size: 36;">國立岡山高中代理代課教師甄試雲端網</h1>
<table><tr><td>1.請先註冊帳號(您的身分證字號)。</td></tr>
<tr><td>2.登入系統，填寫報名表。</td></tr>
<tr><td>3.完成報名費繳交，匯入學校指定帳戶。</td></tr>
<tr><td>4.上傳個人2吋照片，以及匯款證明單據影本或拍照圖片。</td></tr>
<tr><td>5.列印甄試證。</td></tr>
<tr><td></td></tr>
<tr><td>連絡電話：07-6212033。</td></tr>
<tr><td>岡山高中人事室 洪主任 #700，聯絡人 陳小姐 #701。</td></tr>
</table>
<p style="color: Gray;">Power by Google Apps Script，Allen Chang 2023/6。</p>
</body>
</div>
</html>