讓瀏覽器支持 jquery ajax load 前進、後退功能

時間 2019-11-07

原文原文鏈接

市場需求

通常在作 ajax load 的時候，不少人都不會考慮到須要瀏覽器支持前進後退功能，由於大部分人都不知道能夠實現。javascript

資料收集

最近遇到這個問題，通過一小段研究，發現github已經有現成的開源工具使用，主要實現原理是利用html的錨點，即html

<a href="#xxx">
複製代碼

詳情可查看 github.com/balupton/jq…java

demo代碼：jquery

<ul>
	<li><a href="#ttt">ttttttttttttttt</a></li>
	<li><a href="#aaa">aaaaaaaaaaaaaaa</a></li>
	<li><a href="#bbb">bbbbbbbbbbbbbbb</a></li>
	<li><a href="#eee">eeeeeeeeeeeeeee</a></li>
	<li><a href="#mmm">mmmmmmmmmmmmmmm</a></li>
</ul>
<div id="showdiv" style="width: 500px; height: 500px; border: 1px groove #e3e7ea;">default content</div>
複製代碼

<script type="text/javascript">
$(function() {
	// 這裏是共用的位置，經過state參數作操做
	$.History.bind(function(state){
		$('#showdiv').load('action/'+state+'.html');
	});
	// 這裏是對某個連接作特殊操做
	$.History.bind('bbb',function(state){
		alert('點擊了 bbb 連接，這是對 bbb 連接特殊處理位置');
	});
});		
</script>
複製代碼