almost 4 years ago

需求

有一個情境是,如果使用者在瀏覽文章列表,列表有 N 頁,使用者切換到 N 頁,看到喜歡的文章,點進去看,看完之後按下瀏覽器的上一頁,使用者要想回到剛剛切換到的 N 頁,但是...這個切換頁面的功能是用 AJAX 實現的,這時候,使用者只要回上一頁,永遠只能回到第一頁。 囧

方向

1.html 5 有 pushState 這個 API 可以用
2.承上,pushState 不支援 html 4 瀏覽器...囧
3.網路上有 Histroy.js 套件可以用



list.php
  // 這個隱藏 input 要記錄當下 AJAX 的事,回上一頁時,JS 就可以爬到這個值,再做還原 AJAX 的事
<input name="currentPage" id="currentPage" type="hidden" value="1" />
  
  
<script>
$(document).ready(function(){
  // 導頁時,要可以記住上一頁AJAX的動作

    
  // html 4 瀏覽器可執行.

  $("#list").on('click', function(){
    window.location.hash = '#rebind';
  });
  
  if(window.location.hash == "#rebind")
    switchPage();
  
  
  //   只有 html 5 瀏覽器能支援

  history.pushState({isRebind: true}, "is_browser_back");
  window.onpopstate = function(event) {
    var state = event.state;
    
    if(state && state.isRebind)
      switchPage();
  };
});
</script>


see this

html 5 解法
https://developer.mozilla.org/zh-TW/docs/Web/API/Window.onpopstate
http://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser
https://developer.mozilla.org/zh-TW/docs/Web/API/Window.onpopstate
https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onpopstate
http://blog.netsh.org/posts/pushstate-ajax_1339.netsh.html

html 4 解法
http://blog.teamextension.com/onhashchange-jquery-hashchange-pushstate-and-history-js-1012
http://blog.darkthread.net/post-2011-09-23-ajax-history-in-html5.aspx
http://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh

other solution
http://www.webdevelopmenthelp.net/2013/12/browser-back-button-click-event.html
https://www.facebook.com/notes/paul-li/module-%E9%96%8B%E7%99%BC-pjax-pushstate-ajax/10150639213557211

Histroy 跨瀏覽器套件
https://github.com/browserstate/history.js
https://github.com/browserstate/history.js/blob/master/scripts/bundled/html4+html5/jquery.history.js
http://stackoverflow.com/questions/13278822/is-this-a-proper-way-to-use-history-js
http://stackoverflow.com/questions/15835397/html4-browsers-does-not-support-history-pushstate-and-history-replacestate-metho
http://rettamkrad.blogspot.tw/2013/04/ajaxandhistoryapi.html

← javascript debug Yii 驗證和授權 →