Deep linking

在 AJAX 盛行的這個年代, 網頁內容往往都是利用 JavaScript 抓回來再顯示. 某程度上這樣可以提供一個更好的介面設計, 不過同一時間郤帶來另一問題: 如何讓讀者 bookmark 指定內容? 當讀者使用一個網址瀏覽一個網頁時, 如果網頁內容都是用 JavaScript (或者是 Flash) 更新, 網址不變的話, 讀者無法 bookmark 內容, 只能 boomark 首頁, 亦無法透過網址把內容分享至其他地方.

Deep linking 的概念, 就是為網站的指定內容提供特定的網址, 好讓讀者可以利用這個網址去 bookmark 內容, 或和其他人分享. 這樣除了可以令網站更加 user friendly 之外, 同時亦為網站內容提供獨立網址, 方便自己把內容分享到不同地方, 間接擴闊了網站的宣傳渠道.

Deep linking 的方法有很多, 這裡提出的是其中一個做法. 當然, 最後還是要配合網站內容及設計作改動.

首先第一個問題, 就是要令網站顯示新內容的時候, 同時改變網址. 只要改變到瀏覽器所顯示的網址, 讀者就可以 bookmark. 但由於新內容是利用 JavaScript 顯示出來, 我們需要更改網址的同時又要避免瀏覽器更新網頁. 方法就是使用 anchor , 即在網址後面加上 # 及新內容的 identifier. 舉例說, 假如新內容的 id 是 news_123 的話, 當顯示新內容時就可以用以下 JavaScript:

location.replace('#news_123');

location.replace 會把當前頁面改為新的網址, 由於只是指定了一個新的 anchor, 瀏覽器只會把頁面移到指定 anchor 的位置, 如果找不到指定 anchor, 就會原封不動. 因為我們目的就是要網頁顯示不變, 所以 anchor 的名稱不可以存在於頁面之中, 否則頁面的顯示位置會移動.

下一步, 就是當讀者利用那些網址到訪時, 網站需要顯示出相關內容. 由於網址的 anchor 部份並不會傳到伺服器, 我們需要使用 JavaScript 處理網址並顯示指定內容. 因為我們要的只是 anchor 的部份, 所以只需要抽取這個部份出來分析就可以:

var content_id = location.hash.substr(1);

由於這些內容一直都是用 JavaScript 顯示出來, 所以理論上可以用相同方法再次顯示內容.

有些時候, 我們希望這些內容由 server side scripting 如 PHP 直接提供, 以便用另一個方式顯示內容. 例如當你 deep link 的是一幅圖片, 可以請 PHP 直接顯示圖片, 而不是先顯示空白頁面再彈出圖片. 這個時候, 我們可以利用 JavaScipt redirection, 例如:

location.replace("?id="+location.hash.substr(1));

這樣就可以把有關的 id 傳回伺服器處理了.

總結來說, deep linking 的實作其實相當簡單, 但就需要好好的規劃網頁的結構. 例如是如何有系統地產生一個獨立的 id 去指定網站內的不同內容呢? 如何可以有效率地去顯示指定內容呢?

再深入一點的話, 還要考慮當瀏覽器不能使用 JavaScript 的情況, 以及 location.replace 對瀏覽 history 的作用. 假如讀者使用瀏覽器的 back 及 forward 的話, 會有甚麼效果呢? 改用 location.href 又如何? 等等等等, 細微之處, 往往就是最花時間的地方, 但亦顯出你對讀者的細心.