pjaxって #TechLunch

pjaxって
2013/09/18 (水) @ Livesense TechLunch
発表者：春日 太志

Transcript

1. pjaxってどうなの？ 社内では悪い噂しか聞かないけど...
2. pjaxってなんなの？ 使ったことないけど...
3. push state + ajax ブラウザ履歴操作 + 非同期通信
4. 一時期 #! が議論されていた Ajax サイトをクロールするため
5. ajax 周りは library が よろしくやってくれるとして
7. ←戻る window.history.back() window.history.go(-1) window.history.go(-2)
8. 進む→ window.history.forward() window.history.go(1) window.history.go(2)
9. 履歴数 window.history.length // 5だったら -4 〜 4 まで go() に指定できる
10. 履歴に追加してURL更新 window.history.pushState({}, ‘title’, ‘/path’) // 第1引数は window.history.state や window.onpopstate の イベントハンドラで取得できるオブジェクト。上限640KB。それ以 上は session storage や local storage を使用するのが推奨さ れる。なお、popstate イベントは「戻る」「進む」で発生。 // 第2引数はページタイトルを指定できる予定で今は無視される // 第3引数はURLパスで、別ドメイン指定や https 画面からの http 指定などは security error が発生。指定しない場合は現在 のURLパスになる。
12. 履歴に残さずURL更新 window.history.replaceState({}, ‘title’, ‘/path’) // 引数は pushState() と同じ。 // 履歴に残らないので「戻る」「進む」できない画面になる
13. ブラウザ対応状況