html5 - history 歷史管理

時間 2019-11-09

標籤 html5 html history 歷史管理欄目 HTML5 简体版

原文原文鏈接

參考文章：html

w3c : http://www.w3.org/html/ig/zh/wiki/HTML5/historyhtml5

　張鑫旭 :　http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/ajax

zawa : http://zawa.iteye.com/blog/1271031　api

Demo : Demo wordpress

截圖：ui

代碼：this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>選項卡</title>
<style>
body {background: #444; }
p{margin:0;}
.tab_bor{width:500px;margin:20px auto;overflow:}
.tab_bor ul{padding:10px 10px 0 10px;margin:0; display:inline-block;}
.tab_bor li{border:1px solid #fff;border-bottom:none;background:#1b5775;color:#fff;font-weight:bold;padding:0 10px; line-height:32px; font-size:14px;float:left;margin:0 2px;list-style:none; cursor:pointer;border-bottom:none;}
.tab_bor .active{ border:1px solid #fff;color:#fff; position:relative;top:1px;border-bottom:none;background:#187cc2;}
.tab_bor p{padding:10px;color:#fff;font-size:12px;border:1px solid #fff; display:none;background:#383838;height:100px;}
.tab_bor .show{display:block;background:#187cc2;}
</style>
<script>
window.onload = function(){

	var oDiv = document.getElementById('div1'),
		aLis = oDiv.getElementsByTagName('li'),
		aPs  = oDiv.getElementsByTagName('p');


	for( var i=0,len = aLis.length;i<len;i++ ){

		aLis[i].index = i;
		aLis[i].onclick = function(){

			var index = this.index ;
			var name = this.dataset.name; 
			var title = '選項卡'+(index+1);
			document.title = title;
			history.pushState(index,title, '#'+name);

			for( var i=0,len = aLis.length;i<len;i++ ){		
				aLis[i].className = '';
				aPs[i].className = '';
			}
			
			this.className = 'active';
			aPs[ index ].className = 'show';

		}

	} 

	if( history.pushState ){
		
		window.onpopstate = function( ev ){

			var ev = window.event || ev;
			var state = ev.state || 0;
			
			for( var j=0,len = aLis.length;j<len;j++ ){		
					aLis[j].className = '';
		 			aPs[j].className = '';
		 	}

	 		aLis[state].className = 'active';
	 		aPs[state].className = 'show';
		}

	}

	window.onhashchange = function(){

		setLocHistory();

	}

	setLocHistory();

	function setLocHistory(){

		
		var locName = location.href.split("#")[1] || 'tab1';
		
		for( var i=0,len = aLis.length;i<len;i++ ){		
			
			if( locName == aLis[i].dataset.name ){

				for( var j=0,len = aLis.length;j<len;j++ ){		
					aLis[j].className = '';
					aPs[j].className = '';
				}

				aLis[i].className = 'active';
				aPs[i].className = 'show';


			}

		}

	}

}
</script>

</head>
<body>
	<div class="tab_bor" id="div1">
		<ul>
	    	<li class="active" data-name="tab1">標籤一</li>
	        <li data-name="tab2">標籤二</li>
	        <li data-name="tab3">標籤三</li>
	        <li data-name="tab4">標籤四</li>
	    </ul>
	    <p class="show"  data-name="tab1">
	    	內容一
	    </p>
		<p  data-name="tab2">
	    	內容二
	    </p>
		<p  data-name="tab3">
	    	內容三
	    </p>
	    <p data-name="tab4">
	    	內容四
	    </p>
	</div>
</body>
</html>

後記：url

這「history.pushState」必須在服務端才能生肖，因此這頁面在服務端打開。3d

大體講講api 前邊的文章已經很詳盡了：code

history.pushState 三個參數第一個參數爲存儲的數據，第二值是設置document.title的值(不過這個方法如今尚未徹底實現)，第三個值是url路徑(這個須要和後臺配合。。。。其實我也不是很懂。。。。);

window.onpopstate 至關於取值 ev.state 就是history.pushState存儲的數據值;

window.onhashchange 只要location有變化就執行方法的事件;

他的應用固然有些說是作這個翻頁的記錄什麼的其實也有能夠作這些一站式開發的打開判斷，我這demo就是模擬一站式開發的意思。