pjaxについてのメモ
2014/07/02
ずっと気になっていたpjaxについてのメモ。
■参考サイト
http://chibinowa.net/notebook/js/pjax-fragment.html
pushStateとajaxをあわせたpjax。
■メリット
・ajaxと同様で高速、サーバーに優しい
・ajaxはSEOに弱いという面を持っていたが、
pjaxだとURLやソースの中身も変えることができるのでその点を克服。
・モダンブラウザしか使えないが、使えないブラウザだと普通に
ページ遷移で表示してくれる。
■デメリット
・モダンブラウザしか使えない。IEだと10未満はNGとか。
■サンプル
http://sample.taitan916.info/pjax/
■ソース
・index.php
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.pjax.js"></script>
<script>
$(function(){
$('#loading').hide();
$(document).pjax('a.pjax', {
container:'#content',
fragment: '#content'
});
$(document).on('pjax:send', function() {
$('#loading').show();
})
$(document).on('pjax:complete', function() {
$('#loading').hide();
})
});
</script>
<title>jQuery</title>
</head>
<body>
<div id="wrapper">
<header>
<div id="header_inner">
<h1>pjax</h1>
</div>
</header>
<section id="content">
<ul class="links clearfix">
<li>page1</li>
<li><a href="index2.php" class="pjax">page2</a></li>
</ul>
<div id="mainArea">
<p><img src="./image/1.jpg"></p>
</div>
</section>
</div>
</body>
</html>
・index2.php
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.pjax.js"></script>
<script>
$(function(){
$('#loading').hide();
$(document).pjax('a.pjax', {
container: '#content',
fragment: '#content'
});
$(document).on('pjax:send', function() {
$('#loading').show();
})
$(document).on('pjax:complete', function() {
$('#loading').hide();
})
});
</script>
<title>jQuery</title>
</head>
<body>
<div id="wrapper">
<header>
<div id="header_inner">
<h1>pjax</h1>
</div>
</header>
<section id="content">
<ul class="links clearfix">
<li><a href="index.php" class="pjax">page1</a></li>
<li>page2</li>
</ul>
<div id="mainArea">
<p><img src="./image/2.jpg"></p>
</div>
</section>
</div>
</body>
</html>
//追記
SEO対策でhead内、特にmetaを変えられないか調べたところ
不恰好だけと出来た。
$(document).on('pjax:end', function() {
if ($("meta[name=keywords]").attr('content') == '2ページ目です。') {
$("meta[name=keywords]").attr('content', '1ページ目です。');
} else {
$("meta[name=keywords]").attr('content', '2ページ目です。');
}
});
サンプルも書き換え済み。
関連記事
-
-
jQueryでループを抜けようと(breakしようと)するとエラーになる際の対応方法
jQueryでループを抜けようと(breakしようと)すると「Uncaught ...
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
タブアンダー広告をjQueryで再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
jQuery UI Datepickerで日本の祝祭日を表示
やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...