2012年12月5日水曜日

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を組み合わせて田胡研のサイトができているわけです.

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

6 件のコメント:

  1. Really informative article.Really looking forward to read more. Really Cool.
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> goldenslot
    สนใจร่วมลงทุนกับเรา สมัครเอเย่น Gclub คลิ๊กได้เลย

    返信削除

  2. Im grateful for the blog post.Really thank you!
    เว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
    เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา Gclub Royal1688
    และยังมีหวยให้คุณได้เล่น สมัครหวยออนไลน์ ได้เลย
    สมัครสล็อตออนไลน์ได้ที่นี่ >>> Golden slot
    ร่วมลงทุนสมัครเอเย่น Gclubกับทีมงานของเราได้เลย

    返信削除
  3. Purchase healthcare research paper services and healthcare coursework writing services since students find help when they visit Healthcare Essay Writing Services.

    返信削除
  4. There are many theology & religion coursework writing services and Religious Research Writing Services to choose from for those stuck with their religion assignment writing services and theology essay writing help services.

    返信削除
  5. Public relations research writing services are very difficult to complete and many students are always searching for Public Relations Writing Services to help them complete their public relations coursework services and public relations research writing services.

    返信削除
  6. There are many custom coursework writing services and Business Coursework Writing Services to choose from for those stuck with their custom paper writing services and custom college coursework writing services.

    返信削除