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

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

JavaScriptでページを遷移させたり、フレームを利用し始めると、ブラウザのURL表示欄、history back/forward、タブタイトルとの不整合が気になりだします。

タブのタイトルを書き換える

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

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

JavaScriptでの遷移とHistory Back/Forward

事例:なっからサイトのドロワーメニューで、ページ内の遷移をブラウザのフォワード・バックワードに反映。
この事例ではアンカーリンクを用いていない為に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;
history back/forwardで上記登録のhistoryに達するとpopstateイベントが発火
				
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フラグメント(ハッシュタグ)やURLパラメータ

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

SEO対策としては?

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