pjax利用時のJSやCSSの挙動

pjax( https://github.com/defunkt/jquery-pjax )について疑問に思った事をまとめておく。

  • pjaxによるページ遷移後、titleタグの中身はどうなるの？
  • pjaxによるページ遷移後、descriptionの中身はどうなるの？
  • pjaxによるページ遷移後、リンク先のhead内のscriptで読むJSは実行されるの？
  • pjaxによって更新されない場所のHTMLのCSSはどうなるの？
  • pjaxによって更新される場所のHTMLのCSSはどうなるの？
  • pjaxによって更新されない場所のHTMLにバインドされたイベントはどうなるの？
  • pjaxによって更新される場所のHTMLにバインドされたイベントはどうなるの？

以下検証用HTML、CSS、JS。

pjax_test1.html

<html>
<head>
test1







</head>
<body>

div1-1


div1-2


div1-3
	
div1-4

	
div1-5




div1-6

pjax_test1.html
pjax_test2.html
</body>
</html>

pjax_test2.html

<html>
<head>
test2







</head>
<body>

div2-1


div2-2


div2-3
	
div2-4

	
div2-5




div1-6

pjax_test1.html
pjax_test2.html
</body>
</html>

pjax_test_common.js

alert('here is pjax_test_common.js');
jQuery(function($){
    alert('here is pjax_test_common.js load');
    $('#div5').click(function(){
        alert('common');
    });
    if ($.support.pjax) {
        var tagname_change = '#div3';
        var change_speed = 400;
        $('a').on('click', function(e){
            e.preventDefault();
            var href = $(this).attr('href');
            $(tagname_change).animate({opacity: 0}, change_speed, function(){
                $.pjax({
                    url: href,
                    container: tagname_change,
                    fragment: tagname_change,
                    timeout: 2000
                });
            });
        });
        $(document).on('pjax:end', function(){
            $(tagname_change).animate({opacity: 1}, change_speed);
        });
    }
});

pjax_test_1.js

alert('here is pjax_test_1.js');
jQuery(function($){
    alert('here is pjax_test_1.js load');
    $('#div1').click(function(){
        alert(1);
    });
    $('#div2').click(function(){
        alert('titleは'+$("title").html());
        alert('descriptionは'+$("meta[name=description]").attr("content"));
    });
});

pjax_test_2.js

alert('here is pjax_test_2.js');
jQuery(function($){
    alert('here is pjax_test_2.js load');
    $('#div1').click(function(){
        alert(2);
    });
    $('#div4').click(function(){
        alert(2);
    });
    $('#div6').click(function(){
        alert(2);
    });
});

pjax_test_common.css

div {
    margin: 5px;
}
#div1 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #FFAAAA;
}
#div2 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #AAFFAA;
}
#div3 {
    width: 120px;
    height: 250px;
    border: 1px solid black;
    background-color: #AAAAFF;
}
#div4 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #FFAAFF;
}
#div5 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #FFFFAA;
}
#div6 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #AAFFFF;
}

pjax_test_1.css

body {
    background-color: #FFEEEE;
}

pjax_test_2.css

body {
    background-color: #EEEEFF;
}
#div5 {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: blue;
}

結果

pjax_test1.html　→　pjax_test2.html


pjax_test2.html　→　pjax_test1.html


pjaxによるページ遷移後、titleタグの中身はどうなるの？

変更される。pjax_test1.html　→　pjax_test2.htmlで確認。遷移前は「titleはtest1」と表示されるが遷移後は「titleはtest2」と表示される。

pjaxによるページ遷移後、descriptionの中身はどうなるの？

変更されない。pjax_test1.html　→　pjax_test2.htmlで確認。遷移前は「descriptionはtest1」と表示され、遷移後も「descriptionはtest1」と表示される。

pjaxによるページ遷移後、リンク先のhead内のscriptで読むJSは実行されるの？

実行されない。各JSファイルにロード時にalert()を付けているが、pjax遷移後では呼び出されない。また、リンク先のhead内ではなく、更新される部分にscriptタグを書いても実行されない。なので、ページのロードが完了したら実行するJSをリンク先に書いてある場合は実行されないので注意が必要。

pjaxによって更新されない場所のHTMLのCSSはどうなるの？

遷移前のCSSが使用されるpjax_test1.html　→　pjax_test2.htmlで確認。pjax_test1.html ではbodyは薄い赤の背景色を指定していて、pjax_test2.html ではbodyは薄い青の背景色を指定しているが、pjaxによる遷移後もpjax_test1.html の設定が継続して利用されている。

pjaxによって更新される場所のHTMLのCSSはどうなるの？

遷移前のCSSが使用されるpjax_test1.html　→　pjax_test2.htmlで確認。pjax_test1.html では#div5は薄い黄色の背景色を指定していて、pjax_test2.html では#div5は濃い青の背景色を指定しているが、pjaxによる遷移後もpjax_test1.html の設定が継続して利用されている。

pjaxによって更新されない場所のHTMLにバインドされたイベントはどうなるの？

遷移前のバインドが持続される。pjax_test2.html　→　pjax_test1.htmlで確認。#div1をクリックした場合、遷移前も遷移後も「2」とアラートされる。遷移先のpjax_test1.htmlのクリックイベントは一切バインドされないし、遷移元のpjax_test2.htmlのクリックイベントが2重にバインドされることもない。

pjaxによって更新される場所のHTMLにバインドされたイベントはどうなるの？

何もバインドされていない。pjax_test1.html　→　pjax_test2.htmlで確認。
pjax_test1.htmlでは#div5をクリックすると「common」とアラート、pjax_test2.htmlでも#div5をクリックすると「common」とアラートされるが、pjaxによる遷移を行うとクリックしても何も起きない。また、pjax_test2.htmlでも#div4をクリックすると「2」とアラートされるが
pjaxによる遷移だとクリックしても何も起きない。

LINEで送る

投稿タグ
,