アドレスバーのURLを書き換える

  • 160
    いいね
  • 0
    コメント

googleのエイプリルフールネタの「Google 日本語入力 ピロピロバージョン」を見ていたら、
https://www.google.co.jp/ime/___o/
画面をスクロールすると、アドレスバーのURLも下記のように画面更新しないでピロピロと変わっていた。

https://www.google.co.jp/ime/___o/
↓
https://www.google.co.jp/ime/________o/
↓
https://www.google.co.jp/ime/__________/

調べてみたら、Javascriptのhistory.replaceState()history.pushState()を使うと、アドレスバーのURLを書き換えられるみたい。


// 履歴エントリの置き換え 
// http://exapmple.com/xxx/123 → http://example.com/xxx/aiueo
history.replaceState('','','aiueo');

// http://exapmple.com/xxx/123 → http://example.com/aiueo
history.replaceState('','','/aiueo');

// 履歴エントリの追加
history.pushState('','','aiueo');

ブラウザの履歴を操作する - ウェブデベロッパーガイド | MDN
https://msdn.microsoft.com/library/hh920758(v=vs.85).aspx

試しに、ブラウザのコンソールに打ち込むと、秒表示&「o」を秒数分出力を1秒ごとに行う、スクリプトを書いてみた。

setInterval(function(){window.history.replaceState('','', (new Date().getSeconds()) + ''+ Array((new Date().getSeconds()+1)).join('o'))},1000);

ブラウザのコンソールに上を打ち込むと、アドレスバーのURLが下記のように1秒ごとに書き換えられる。Macだと🍣絵文字が使えるので色々出来そう。

http://example.com/21ooooooooooooooooooooo

urlxx.gif

sushi.gif

ブラウザのアドレスバーに、下記のjavascript:〜の形式で打ち込めでもいける。

javascript:setInterval(function(){window.history.replaceState('','', (new Date().getSeconds()) + ''+ Array((new Date().getSeconds()+1)).join('🍺'))},1000);

このURLの置き換えのreplaceState、pushStateはHTML5から対応だけれども、
hash(#)の置き換えであれば、HTML5以前のブラウザでもlocation.hashを使って置き換えられる。
例えば、以前のTwitterのURLはtwitter.com/#!/xxxxのようになっていて、画面遷移無しで#!以降が書き換えられていた。
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ | webOpixel
XMLの第一人者Tim Bray氏「URLに#!入れるな」:濃縮還元オレンジニュース|gihyo.jp … 技術評論社

/* http://example.com/#aiueo の#以降を書き換える。*/
location.hash='aiueo';

つまり、location.hashを使っても同じようなことが出来る。

setInterval(function(){location.hash=(new Date().getSeconds()) + ''+ Array((new Date().getSeconds()+1)).join('o')},1000);

どうしてこういったURLの書き換えできる機能があるのかというと
パラメータ付きURLのパラメータを消すために使ったりするようだ。
キャンペーン用トラッキングパラメータ付きURLを、HTML5のreplaceStateで美しくスッキリさせてみた | 編集長ブログ―安田英久 | Web担当者Forum
あとは、Googleの画像検索のような、スクロールで自動でページを継ぎ足しするで、ページ番号をURLに保持させたいときとかな。
AutoPatchWork でページ継ぎ足し時に replaceState で URL を書き換える - #生存戦略 、それは - subtech

あと、以前のTwitterの様に
画面遷移しないけれども、ブックマークやSEOの問題で同一URLにはしたくないページ対策としてあったhashbang(#!)  例:twitter.com/#!/xxxx に替わるものではと思う。
Twitterは2012年にhashbang(#!)はパフォーマンスの問題で廃止しているみたいだけれども。
Twitter.comの読み込みが高速化 5分の1に短縮 - ITmedia NEWS

GitHubのような画面のリロードなしでコンテンツが変わってURLも変わるページを実現するプラグインとして、「PJAX」があるけれどこれはpushStateを使っているっぽい。
http://falsandtru.github.io/jquery-pjax/