ページ遷移をしないでアドレスバーのURLを書き換える

ページ遷移をしないで、動的にアドレスバーのURLを書き換えてみます。

対応ブラウザ

対応ブラウザはこちら
IE9以下、Android4.1以下(Android2.2と2.3を除く)は対応していないようです。

サンプルコード

実装方法はpushState()とreplaceState()があり、主な違いはブラウザに履歴を残すかどうかです。

pushState()はブラウザに履歴を残してURLを変更します。

JavaScript

// 書き換えるURL(ハッシュ)
var url = ["(」・ω・)」うー！", "(/・ω・)/にゃー！"];
var count = 0;
// URLを順々に書き換える
setInterval(function() {
	var path = location.pathname;
	// URL書き換え
	window.history.pushState(null, null, path + '#' + url[count]);
	if(count < url.length - 1) {
		count++;
	} else {
		count = 0;
	}
}, 1000);

pushState()のデモページ

replaceState()はブラウザに履歴を残さないでURLを変更します。

JavaScript

// 書き換えるURL
var url = ["(乂'ω')きゅっ", "きゅっ(乂'ω')", "(乂'ω')きゅっ", "└('ω')┘ﾆｬ"];
var count = 0;
// URLを順々に書き換える
setInterval(function() {
	// URL書き換え
	window.history.replaceState(null, null, url[count]);
	if(count < url.length - 1) {
		count++;
	} else {
		count = 0;
	}
}, 500);

replaceState()のデモページ
　

【参考サイト】

• ブラウザの履歴を操作する – ウェブデベロッパーガイド | MDN