由使用者的回饋來看，減少網頁PostBack與網頁重新導向次數，確實大幅提高操作回應速度，提供更好的操作體驗，不過倒有一個常被垢病之處 --- 使用者明明覺得點選操作後瀏覽器切換到下一個畫面，為什麼按覽器的回上頁卻無法回到上個畫面?
細究這個問題的根源，在於程式是透過AJAX方式取得下一畫面內容更新在網頁上，或是動態顯示/隱藏不同的DOM元素，給予使用者"由操作網頁A切換到操作網頁B"的認知，但以瀏覽器的角度，卻始終是同一個網頁；由於使用者覺得網頁已被切換過，當需要回前一個介面進行資料修改或重新選擇時，直覺上便會去點選"回上頁"，結果跳過了AJAX切換介面的過程，直接進入這個網頁前的瀏覽網頁，造成認知與執行結果的落差，形成抱怨。
當然，在吃過幾次悶虧(例如: 回上頁造成結果沒儲存之類的，這個倒有解藥)，碰了一鼻子灰之後，使用者就會學乖，自動避開"在某某網頁不能按【回上頁】，很可怕，不要問"的地雷。或者，我們也可以恐嚇提示或教育使用者避免在這類介面按回上頁，或是在網頁加上自己寫的"AJAX版回上頁"按鈕實現切換回上一個UI效果做為替代，不過，這些治標做法終究無法完全避免使用者誤觸回上頁所造成的困擾。
用一個實例來展示這個問題:
排版顯示純文字
STEP1
STEP2
FINAL
線上展示
以上的網頁包含三個
，假裝是輸入流程中的三個步驟，STEP1按Next可以跳到STEP2，STEP2按Next可以跳到STEP3。在操作上，讓使用者感覺在不同的網頁介面間切換，但對瀏覽器來說，自始至終都在同一網頁，於是，如圖所以，操作時連回上頁鈕都沒得按。
搞HTML的老骨頭可能記得#書籤的用法(參考[請看"書籤"相關說明])，在網頁MyPage.htm中放入，當URL指定MyPage.htm#myBookmark，瀏覽器就會開啟該網頁並捲動到的所在位置。有趣的是，MyPage.htm#a跟MyPage.htm#b可被視為不同網址(這表示在瀏覽歷史中會出現一筆)，卻又不會觸發網頁重新載入，這個特性讓AJAX回上頁問題出現一線曙光。
在URI規範中，#符號後方所帶的資訊被定義成Fragment Identifier(#是Hash symbol，#後方的內容也被稱為hash)，不只是作為書籤定址，還可實現AJAX的歷史巡覽功能(from Wiki: With the rise of AJAX, some websites use fragment identifiers to emulate the back button behavior of browsers for page changes that do not require a reload, or to emulate subpages.)，硬綁綁的規範讓人頭好痛，這裡只研究怎麼應用就好。
以下是一個簡單的hash應用示範(請使用IE8/9/10的標準模式、Firefox、Chrome或Safari執行)
排版顯示純文字
Hash Demo
線上展示
網頁裡有一小段程式，會在第0-7秒時，在URL的最後方加上#s0-#s7，執行完畢後，按瀏覽器回上頁及回下頁可在不同的#sn間切換，按下"Show location.href"則會顯示目前的location.hash，當來回切換上一頁下一頁，下方hash=#sn的顯示並不會被清除，驗證了網頁並未被重新載入，Javascript及DOM的狀態在切換過程中不會遺失。
但很不幸地，IE7(或IE8/9開相容模式)對location.hash特性支援不夠完整，hash改變時並不會在瀏覽歷史中產生記錄，因此需要透過加入隱藏式iframe等特殊手法來克服，自己處理跨瀏覽器議題太辛苦，有個很好用的jQuery外掛BBQ(不是中秋烤肉巴比Q，是Back Button & Query)可以讓我們輕鬆寫出跨瀏覽器版的AJAX回上頁功能。
小小改寫前述STEP1-STEP2-FINAL網頁，主要是在切換網頁時透過$.bbq.pushState()將目前的階段設成location.hash(#step=sn)，另外在window.onhashchage事件則加入一小段程式，讀取hash值決定現在是STEP1,2還是FINAL，以及該顯示哪一個
搞HTML的老骨頭可能記得#書籤的用法(參考[請看"書籤"相關說明])，在網頁MyPage.htm中放入，當URL指定MyPage.htm#myBookmark，瀏覽器就會開啟該網頁並捲動到的所在位置。有趣的是，MyPage.htm#a跟MyPage.htm#b可被視為不同網址(這表示在瀏覽歷史中會出現一筆)，卻又不會觸發網頁重新載入，這個特性讓AJAX回上頁問題出現一線曙光。
在URI規範中，#符號後方所帶的資訊被定義成Fragment Identifier(#是Hash symbol，#後方的內容也被稱為hash)，不只是作為書籤定址，還可實現AJAX的歷史巡覽功能(from Wiki: With the rise of AJAX, some websites use fragment identifiers to emulate the back button behavior of browsers for page changes that do not require a reload, or to emulate subpages.)，硬綁綁的規範讓人頭好痛，這裡只研究怎麼應用就好。
以下是一個簡單的hash應用示範(請使用IE8/9/10的標準模式、Firefox、Chrome或Safari執行)
排版顯示純文字
線上展示
網頁裡有一小段程式，會在第0-7秒時，在URL的最後方加上#s0-#s7，執行完畢後，按瀏覽器回上頁及回下頁可在不同的#sn間切換，按下"Show location.href"則會顯示目前的location.hash，當來回切換上一頁下一頁，下方hash=#sn的
但很不幸地，IE7(或IE8/9開相容模式)對location.hash特性支援不夠完整，hash改變時並不會在瀏覽歷史中產生記錄，因此需要透過加入隱藏式iframe等特殊手法來克服，自己處理跨瀏覽器議題太辛苦，有個很好用的jQuery外掛BBQ(不是中秋烤肉巴比Q，是Back Button & Query)可以讓我們輕鬆寫出跨瀏覽器版的AJAX回上頁功能。
小小改寫前述STEP1-STEP2-FINAL網頁，主要是在切換網頁時透過$.bbq.pushState()將目前的階段設成location.hash(#step=sn)，另外在window.onhashchage事件則加入一小段程式，讀取hash值決定現在是STEP1,2還是FINAL，以及該顯示哪一個
。如此，一旦使用者按下回上頁/回下頁，URL中的hash不同就會觸發hashchange事件，程式就能依指定的階段切換不同的
。
排版顯示純文字
AJAX GoBack
STEP1
STEP2
FINAL
線上展示
經過這番加工，網頁就能跨瀏覽器支援回上頁功能，我們又向高級AJAX網頁開發再前進一步囉!
reference : http://blog.darkthread.net/post-2011-09-22-ajax-goback.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Darkthread+%28Darkthread%29
排版顯示純文字
STEP1
STEP2
FINAL
線上展示
經過這番加工，網頁就能跨瀏覽器支援回上頁功能，我們又向高級AJAX網頁開發再前進一步囉!
reference : http://blog.darkthread.net/post-2011-09-22-ajax-goback.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Darkthread+%28Darkthread%29
發表文章
沒有留言:
張貼留言