投稿日:2014年6月24日

Pjaxってなんじゃっくす

ちげーし。折れ案件でバンバンつかってるし。わかってるし。アレだろアレ。(滝汗)
前に人に説明する用に調べたやつをまとめるだけだし。(滝汗)

概要

サンプルもあって解りやすくまとめてくださっている
web帳 | pjax (pushState + Ajax) jquery plugin 使用方法 などなど :
http://www.webcyou.com/?p=4365

図解があってみやすくてありがたい
pjaxできれいなURL+非同期画面遷移! by Utage Blog :

pjaxできれいなURL+非同期画面遷移!

注意点

documentにバインドしましょうというお話
pjax導入にあたっての注意点 – ytch’s diary :

pjaxもとうぜんajaxの時と同じようにSNSボタンは再度呼ばないとだめ
WordPressでPjaxの実装と、よくあるトラブルの解決方法 | naoyu.net :

WordPressでPjaxの実装と、よくあるトラブルの解決方法

対応環境に注意が必要です
モバイルは〜Android4.01が非対応だったり挙動が不安定だったりします。
PCはIEが10からです。

Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/#search=pushstate

イベントについて

イベントいろいろ
defunkt版pjaxの説明 | Cubix
http://chibinowa.net/notebook/js/pjax-fragment.html/defunkt.html#effect

ブラウザ遷移について

pjax:popstateでpjaxロードされた内容に合わせてゴニョゴニョしようとしたら
完了してないときに呼ばれててはまりそうになった。
その場合はendが呼ばれた時にフラグチェックするように変更したらうまくいった。

    var popstateFlag = false;

    // ブラウザバックの時にフラグを立てる
    $(document).on('pjax:popstate', function(e) {
        console.log(e.state);
        console.log(e.direction);
        popstateFlag = true;
    });
    // pjax処理が終わったらフラグを確認してファンクション叩く
    $(document).on('pjax:end', function(e) {
       if(popstateFlag === true){
          pjaxPopstateFunk();
       }
    });

アナリティクスについて

javascript – jQuery pjax and google analytics – Stack Overflow
http://stackoverflow.com/questions/9527965/jquery-pjax-and-google-analytics

これに書いている通り、pjax通信完了時にページビューをカウントさせます

テストした結果、
1)ページ埋め込みのみ
→初期にロードされたページのみの計測

2)PJAX通信終了時にpageview計測用タグを呼び出し
→呼び出されたページを計測

$(document).on('pjax:end', function() {
    ga('set', 'location', window.location.href);
    ga('send', 'pageview');
});

なので
1)2)を併用すれば大丈夫そうです。

投稿日:2014年6月24日

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA