Apps Script在內部網頁之間的連結:改變base標籤

上次在AppsScript在內部網頁之間的連結有提到可以用template取用getServerUrl()來組合URL,然後以document.baseURI來組合我們AppsScript內的相對連結。但是這一切也還是麻煩,所以就衍生出了只想要改變base標籤就能一體適用的想法。

在這個想法裡面,原本我想要從window.top取URI來設定,不過很不幸的,

所以我們後端還是需要getServerUrl這個函數

function getServerUrl() {
return ScriptApp.getService().getUrl();
}


前端部份,則直接用js的從後端抓取server的URL,這個作法有兩大好處:

  1. 後端輸出html網頁時不再需要使用template。意味著我們還是可以透過上傳HTML,就能做完大部分的動態網頁輸出工作。
  2. javascript部份不需要對所有的可能是連結的標籤、表單等,進行連結的檢查,確認是否為AppsScrpit網頁內部連結才能修改它。這一步驟實在複雜。

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head><meta charset="UTF-8"></head>
<body>
<h1>修改BASE</h1>
<ul>
<li><del><a href="/">link for /(DONT USE)</a></del></li>
<li><del><a href="/exec">link for /exec(DONT USE)</a></del></li>
<li><a href="exec">link for exec</a></li>
<li><a href="exec?show=filesInDrive">link for exec?show=filesInDrive</a></li>
<li><a href="?test">link for ?test</a></li>
<li><a href="?show=confirmToken">link for ?confirmToken</a></li>
</ul>
<script>
google.script.run
.withSuccessHandler(function (url) {
var base = document.getElementsByTagName('base')[0]
if (!base) {
base = document.createElement('base')
document.head.appendChild(base)
}
base.target = '_top'
base.href = url
})
.getServerUrl()
</script>
</body>

</html>

由於Javascript提供我們設定base標籤的方法,因此我們可以只設定base標籤的href為目前AppsScript的Server URL,瀏覽器就會對所有的相對連結修改當前連結。

核心程式碼主要是3行
var base = document.getElementsByTagName('base')[0]
...
base.target = '_top'
base.href = e.url

取出base標籤,設定base標籤的href和target。

修改後要留意的有三點:
  1. 網頁內的連結不應該使用 / 開頭(即root目錄開頭),瀏覽器會認為是要進入google apps script的首頁,不是跑回我們的首頁。
  2. 網頁內的首頁是用exec表示,所有的get/post也是透過exec來處理執行。
  3. 內部連結可以直接略過exec直接寫?參數,瀏覽器幫忙拼接base的URL。


留言