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。


留言

張貼留言