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-1div1-2div1-3div1-4div1-5div1-6pjax_test1.html pjax_test2.html </body> </html>
pjax_test2.html
<html> <head>test2 </head> <body>div2-1div2-2div2-3div2-4div2-5div1-6pjax_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による遷移だとクリックしても何も起きない。
