history.pushState 實現ajax無重新整理更改url

標籤：style   blog   http   io   color   ar   sp   div   on   

暫時沒啥心得，直接上例子。

 1 <html> 2 <head> 3 <title> 4 fasd 5 </title> 6 <script> 7 window.addEventListener(‘popstate‘, function(e){ 8   if (history.state){ 9     var state = e.state;10     console.log(state.title);11   }12 }, false);13 14 function ok(id){15     var url = ‘http://www.test.com/test.php?arg=‘ + id;16     var title = id + ‘title‘;17     var state = {18             title: title,19             url: url,    20         };21     history.pushState(state, title, url);22     console.log(url);23 }24 </script>25 </head>26 27 <body>28 1</br>29 <a onclick="ok(1);">1****1</a></br>30 <a onclick="ok(2);">2****2</a></br>31 <a onclick="ok(3);">3****3</a></br>32 <a onclick="ok(4);">4****4</a></br>33 <a onclick="ok(5);">5****5</a></br>34 <a onclick="ok(6);">6****6</a></br>35 </body>

 

參考：

http://yansong.me/2013/01/11/learning-history.pushState-and-history.replaceState.html

http://www.welefen.com/use-ajax-and-pushstate.html

 

history.pushState 實現ajax無重新整理更改url