No Barba

ページ3、ページ4のリンクはbarbaを使いません。


HTML

1.html
<div id="barba-wrapper">
  <div class="barba-container" data-namespace="homepage">
    <p>ページ1</p>
    <p><a href="./2.html">ページ2を表示</a></p>
    <p><a class="no-barba" href="./3.html">ページ3を表示(<code>.no-barba</code>)追加</a></p>
    <p><a href="./4.php">ページ4を表示(チェックロジック追加)</a></p>
  </div>
</div>
2.html
<div id="barba-wrapper">
  <div class="barba-container" data-namespace="homepage">
    <p>ページ2</p>
    <p><a href="./1.html">ページ1を表示</a></p>
    <p><a class="no-barba" href="./3.html">ページ3を表示(<code>.no-barba</code>)追加</a></p>
    <p><a href="./4.php">ページ4を表示(チェックロジック追加)</a></p>
  </div>
</div>
3.html
<div id="barba-wrapper">
  <div class="barba-container" data-namespace="homepage">
    <p>ページ3</p>
    <p><a href="./1.html">ページ1を表示</a></p>
    <p><a href="./2.html">ページ2を表示</a></p>
    <p><a href="./4.php">ページ4を表示(チェックロジック追加)</a></p>
  </div>
</div>
4.html
<div id="barba-wrapper">
  <div class="barba-container" data-namespace="homepage">
    <p>ページ4</p>
    <p><a href="./1.html">ページ1を表示</a></p>
    <p><a href="./2.html">ページ2を表示</a></p>
    <p><a class="no-barba" href="./3.html">ページ3を表示(<code>.no-barba</code>)追加</a></p>
  </div>
</div>

php

4.php
<?php
header('Content-Type: text/html; charset=UTF-8');
include('./4.html');
exit;

JavaScript

Barba.Pjax.start();
// オリジナルのオブジェクトにBarba.Pjax.preventCheckを代入
Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;
 
// 通常のチェック機能を拡張
Barba.Pjax.preventCheck = function(evt, element) {
  // originalPreventCheck(Barba.Pjax.preventCheckが入っている)
  if (!Barba.Pjax.originalPreventCheck(evt, element)) {
    // 該当リンクはPJAXを無効化
    return false;
  }
 
  // element.href自体のチェック不要です
  // その為にoriginalPreventCheckを使いました。(その他のチェックもしています)
  if (/.php/.test(element.href.toLowerCase())) {
    // phpの場合はPJAXを無効化
    return false;
  }
 
  return true;
};