タグ

JavaScriptとpushStateに関するgrapswizのブックマーク (2)

  • 超シンプルな、pushState + Ajax = PJAXのサンプル Flask編 - When it’s ready.

    HTML5熱いですね。いろんな意味で BigPipeやら、HTMLでテンプレートエンジンとかいろいろ出ていますがユーザービリティ下げちゃいけないよねって事は、どの技術でも大切な共通項ですね。pjax = pushState + ajax使えば、リッチな人にはサクサクなUIを、そうじゃない人にもそれなりに提供できる。その上、戻るボタンもサーチエンジンにも優しいとくれば、これは試さないわけには行かないですね。 動作サンプル: http://pjax.atu.si/ Pjaxするとどうなるのか? 非同期動作時 http://pjax.atu.si にアクセスをして、リンクをクリックすると要素が非同期に変更される。 非同期に更新されているがURLは、シンプルなものに変更される。 同期動作時 http://pjax.atu.si/parts/x や http://pjax.atu.si/parts/

    超シンプルな、pushState + Ajax = PJAXのサンプル Flask編 - When it’s ready.
  • history.pushState、history.replaceState - 素人がプログラミングを勉強していたブログ

    HTML5のhistory.pushState、history.replaceStateを試した。 HTML5 pushState/replaceState demoで動かせる。 Minefieldだと完全に意図した通りに動くがWebKitだとURLまわりがうまくいかない。 メインのソースコードは下記の通り。 canvasで適当に壁紙用画像を作るデモで、画像自体をクリックして何度も作り直せるようにした。 こういう物を作るときは、前の画像に戻れるよう履歴管理をすべきだが、今まではlocation.hashを使ったり(hashchangeイベントが入るまではタイマーが必要だった)iframeを使ったハックだったり(ブラウザ間の互換性やhistory.go(-2)をきちんと動かすのが難しい)、あるいはページを遷移する(必要ない部分まで毎回読み込まれる)必要があった。 pushState/repl

    history.pushState、history.replaceState - 素人がプログラミングを勉強していたブログ
  • 1