事件和函数重载

从技术上讲，InstantClick 使您的网站成为单页应用程序，因此不再有 DOMContentLoaded 在页面更改时触发。因此，可能需要调整其他脚本才能与 InstantClick 一起正常工作。

事件

InstantClick 会触发四个事件，以提供进入页面生命周期的钩子：

change ：页面已更改，也会在初始页面加载时触发。
它的回调可以采用可选的 isInitialLoad 参数，它是一个布尔值，当它是初始页面更改或不支持 InstantClick 时为 true，当 InstantClick 更改页面时为 false。
forward ：前进触发和change用法一致
restore ：返回时触发没有变量
fetch ：页面开始预加载。
receive ：已预加载页面。您可以修改其内容。
wait ：用户已单击链接，但页面尚未预加载。仅当页面未立即显示时触发。

要监听事件，例如 change，请使用 InstantClick.on：

InstantClick.on('change', yourCallback);

您需要在 InstantClick.init 之前调用 InstantClick.on，因为 change 事件也会在初始页面加载时触发。

如果您在 <body> 中有一个脚本，您不希望在 InstantClick 显示页面时重新评估该脚本，请将其添加 data-no-instant 属性。

<script data-no-instant>alert("I’m only run once.");</script>

例如，以下是使 Google Analytics（2013 年末代码）正常工作的方法：

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga('send', 'pageview') */
InstantClick.on('change', function() {
  ga('send', 'pageview', location.pathname + location.search);
});
InstantClick.init();
</script>

跟常规pjax一样，需要重载的函数在change事件里重载即可，其他事件其实用处不是很大

在receive时更改内容

有时，动态更改页面比为 InstantClick 重新构建后端更简单。Receive 允许您执行此操作。

它获得三个参数：url、body 和 title。

url 是收到的页面的地址，它包含哈希值。它是只读的。

body 是 body 对象，title 是标题文本。如果您想在显示页面之前更改页面，您可以修改这两个字段并返回一个带有它们的对象（或者只使用其中一个来只修改一个）。

下面是一个示例。

InstantClick.on('receive', function(url, body, title) {
  var dont_display = body.querySelector('#dont_display_me_when_loaded_with_instantclick')
  if (dont_display) {
    dont_display.setAttribute('hidden', '');
  }
  title += ' (loaded with InstantClick)';
  
  return {
    body: body,
    title: title
  };
});

请记住，这里的 body 对象是 body，而不是 document.body！

当你有多个 Callback 监听 receive 时，每个后续回调都将获取最后更改的内容。

如果您不想在 receive 时更改页面，则不返回任何内容或返回 false。

InstantClick魔改版

事件

在receive时更改内容

登录