ブラウザのナビゲートをコントロールする

事例：ちゅんラヂで選局すると、ラジオ局名がタブに表示されます。
ブラウザのタブにはそのページのタイトルが表示されます。そこで下記の様に記述するとタブに表示されているタイトルが変更されます。

	document.title = '表示するタイトル'

事例：なっからサイトのドロワーメニューで、ページ内の遷移をブラウザのフォワード・バックワードに反映。
この事例ではアンカーリンクを用いていない為にhistoryには遷移が記録されない、そこでJavaScriptでhistoryにその遷移を登録している。そしてHistory Back/Forwardが行われたときのイベントに「historyの内容に対応する遷移を行う」関数を登録している。
詳しくは/js/index.jsのgTab.init()とgTab.showpage()を参照。
ウェブアプリを動きをHistory Back/Forwardに対応付けしたいときに必須な考慮です。

historyで遷移してほしい状態のIDとURLをプッシュ、アドレス欄にも表示される

				
history.pushState(aTab.id, null,'#'+aTab.id);
document.title = aTab.innerText;

				
window.addEventListener('popstate',function(e){
	//履歴を移動した
	var sec;
	if(e.state){
		//stateがあったら、そのIDを開く
		sec = document.getElementById(e.state);
	}else{
		//stateがなかったら、最初はAだったのでAを開いておく
		var ele = document.getElementsByClassName('tab_item');
		sec = ele[0];
	}
	gTab.showpage(sec, false);		//第2引数のfalseはHistory Back/Forwardによる遷移であることをshowpageに知らせる
},false);

URLフラグメントはページ内の遷移(historyはreplace)、URLパラメータはページに意味をもたせる遷移(historiはpush)。
ちゅんラジの選局状態はURLフラグメントとしており、history replaseで、現在位置のhistoryを上書きするだけです。
なっからはURLパラメータで別メージ(実態はSPAでHTML的には１ページ)という意味合いで使っており、history pushしてhistory履歴に追加しています。
双方ののナビゲーション的な違いは、ちゅんラジの積極はhistory Back/Forwardに影響しません。なっからページはhistory Back/Forwardの履歴として記録されます。

SEO対策としては？

URLフラグメントはGoogle検索のロボットが無視するらしい。そこで検索リストに登録したいページ遷移はURLパラメータを指定したほうが良いと思われます。