No Barba

ページ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;
};