pushStateのお話

こんにちは 5日の担当の 4年生 Fuya です，

田胡研究室のウェブサイト http://www.t-lab.cs.teu.ac.jp/ に使われているpjaxのpushStateについて紹介します．

田胡研サイトのスライドページ遷移

サイトを見てくれた方はわかると思いますが，pjaxによるページ遷移をしています．
リンクを押すとページを再ロードすること無くコンテンツが変わりますが，URLの変わっているのがpjaxなのです．

pjaxとは?

とりあえず用語はWikipediaさんに聞いましょう...

載ってないじゃないですかー！いやだー！
Githubでpjaxと検索したら何か出てきました．

pushState + ajax = pjax

ちょっと良くわからないです

pushStateとはJavaScriptのwindow.history.pushStateメソッドのことで，historyオブジェクトはブラウザの履歴を弄れるできる素晴らしいオブジェクトです．

詳しいことはMDNに書いてあります
https://developer.mozilla.org/ja/docs/DOM/Manipulating_the_browser_history

pushStateを使ってみよう！

その中のpushStateメソッドはHTML5で追加されたもので，ブラウザの履歴の追加ができるようになりました．履歴まで弄られるとは恐ろしい...

このブログを見ている人も，ブラウザをのコンソールをたちあげて一緒に打ってみてください！
1行ずつ打ってくださいね．

location.href = "http://www.t-lab.cs.teu.ac.jp/";//田胡研サイトへ移動

window.history.pushState(null, null,"gaia.php");
window.history.pushState(null, null,"ke-tai.php");
window.history.pushState(null, null,"cloud.php");

URLが変わってる!やったね
ウェブページの中身が変わっていないのにアドレスバーの値が変わった！
履歴を見てみると...

反映されてる!ブラウザ変わった気がするけど気にしない

悪戯してみたい

こんな感じで履歴の操作がJavaScript上からできるようになると，悪戯を思いつきますよね

僕のサイトに来てくれた人のブラウザの履歴にエロサイトの履歴をぶち込んでやろうぜ

ブラウザのコンソールから

location.href = "http://www.t-lab.cs.teu.ac.jp/";//田胡研サイトへ移動

window.history.pushState(null,null,"http://erosite.example/ero/1.avi");
window.history.pushState(null,null,"http://erosite.example/ero/2.avi");
window.history.pushState(null,null,"http://erosite.example/ero/3.avi");

えいっ!

ふえぇ
残念ながらできません＞＜ 同じオリジン※でないと通信できないのです...

※オリジン = プロトコル + ドメイン + ポート番号 よく出るから覚えておくように！

このpushStateとajaxを組み合わせて田胡研のサイトができているわけです．

明日は誰が書くのかな？？お楽しみに