読者です 読者をやめる 読者になる 読者になる

ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。

価格.comのあの挙動が長年謎だったけど最近ついにその挙動がまねできるかもしれないものがわかった

あれってURLがサブドメインから変わるけれど、画面の一部しか書き換わりませんよね。どうやっているのかすごく気になっていたのですが、最近完全に真似は出来ないものの、それっぽいことができるpushStateというものを知りました。

これなに

ブラウザーは今までにアクセスした場所の履歴を覚えています。実はこれ、JavaScriptからもアクセスすることができるのですが、pushStateを使うと改変しちゃうことができます。
history.pushState('', '', 'hoge.html');
でURLがhttp://example.com/hoge.htmlに書き換わります。書き換わるだけです。あとは必要な部分だけAjaxで書き換えてあげれば画面の一部分だけを更新できるという寸法です。ただこれ、同じオリジンでないと書き換えできないため、価格.comのまねをするには至りません。あれはサブドメイン変えてきてますからね…なおGitHubはこれを使ってシームレスな画面遷移を実現しているそうです。

使い方

どちらかというと心がけなのですが、リンク先はちゃんと実体があるものにしておきましょう。サイトにアクセスしてくれる人のブラウザーがpushStateに対応している保証はありませんからね。