专栏首页杨逸轩 ' sBlog如何将Pjax整合进网站,实现全站无刷新加载?

如何将Pjax整合进网站,实现全站无刷新加载?

pjax工作原理

用大白话来说,就是ajax的升级版--可以动态记录历史记录的ajax技术。我们之前用ajax来做无刷新分页,一个最大的不足之处就是无法通过uri来标识这个资源以及历史记录倒退问题,通过利用html5 pushState的api,我们可以轻松达到发送ajax请求的同时,动态的记录状态,这就是pjax!

准备工作

pjax是什么东西,我们懂了之后,就要开始用它了!但是我们要写一套复杂的js去pushState么?答案是不需要的,已经有人封装好了JqueryPjax插件,我们只需用人家写好的插件即可。由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ哦!

<script type='text/javascript' src='jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='pjax.js'></script>

开始使用

模板中:

$(document).pjax('a', '#pjax-container');
$(document).on("pjax:timeout", function(event) {
    // 阻止超时导致链接跳转事件发生
    event.preventDefault();
});

本页面所有a链接默认用pjax请求数据,请求的数据放入id为pjax-container中。ps:如果前台模板有模板继承,直接写入父类即可。

后台程序、这里用php程序示范:

首先判断是pjax请求还是正常的请求,可以封装成一个方法(方法很多~我只做个示范):

protected function is_pjax(){
  $input = $_POST;
  if(isset($input['_pjax']) && !empty($input['_pjax'])){
      return true;//是pjax请求
  }else{
      return false;//不是pjax请求
  }
}

然后控制器根据是否pjax返回不同的数据:

if($this->is_pjax()){
    return view('index_pjax');//返回pjax的模板
}
return view('index');//返回正常的模板

这里用laravel的方法展示了下,TP中是$this->display()这里不再赘述。

好了,此时大功告成!

解决问题

问题:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以JQ等绑定的事件无效。如多说评论框无法正常使用。

解决:用pjax的加载完成后的回调函数再次绑定即可!

<script>
$(document).on('pjax:complete', function() {
    pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
});
function pajx_loadDuodsuo(){
    var dus=$(".ds-thread");
    if($(dus).length==1){
        var el = document.createElement('div');
        el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
        el.setAttribute('data-url',$(dus).attr("data-url"));
        DUOSHUO.EmbedThread(el);
        $(dus).html(el);
    }
}
</script>

进一步优化

过渡动画效果:

pjax.js提供了两个api:

<div class="loading"></div>//用css+js写你的过渡动画效果
<script>
$(document).on('pjax:send', function() { 
    $(".loading").css("display", "block");//pjax链接点击后显示加载动画;
});
$(document).on('pjax:complete', function() { 
    $(".loading").css("display", "none");//pjax链接加载完成后隐藏加载动画;
});
</script>

pjax与百度编辑器代码高亮 使用pjax后,百度编辑器的代码高亮是没效果的,在回调中使用SyntaxHighlighter.all()是没任何效果的,我们只需在回调函数里调用下SyntaxHighlighter.highlight()即可!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Butterfly的Pjax适配方案

    https://liuyib.github.io/2019/09/24/use-pjax-to-your-site/

    Akilar
  • zblogPHP增加pjax功能,大写的一个“帅”字

    哈哈,紧跟时代潮流,李洋博客增加最新最炫的pjax功能。大写加粗的一个“帅”字,呵呵!

    李洋个人博客
  • Speed丨如何快速给网站添加Pjax?

    Pjax是一种很多网站( facebook,  twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后...

    V站CEO-西顾
  • 小白博客 迷你音乐播放器及实现全站pjax无刷新加载

    演示截图: ? 请点击此处输入图片描述 ? 请点击此处输入图片描述 使用教程,下载播放器文件,直接上传压缩包至你的网站根目录,然后解压到根目...

    奶糖味的代言
  • DIASPORA – 简约素色响应式单栏 WORDPRESS 博客主题

    神无月
  • InstantClick,让你的网站快到起飞,PJAX技术

    instantclick.js 是一种ajax无刷新和预加载页面的技术,对于普通博客程序,有着明显的加速作用。(instantclick.js ≈ pjax +...

    Alone88
  • Butterfly主题的PWA实现方案

    PWA的全称是Progressive Web Apps,译为渐进式网络应用程序。装配了PWA以后,用户可以将网站作为WEB APP安装到自己的设备上,以原生应用...

    Akilar
  • pjax 历史管理 jQuery.History.js

    deepcc
  • Pomelo-单栏式简约清新wp主题

    神无月
  • Handsome魔改备忘

    请注意,本文编写于 536 天前,最后修改于 137 天前,其中某些信息可能已经过时。

    Naraku
  • SAO UI Plan -- SAO Utils Web 1.0

    由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

    Akilar
  • yii2使用pjax翻页无刷新

    1.pjax必须包含使用到的所有js,也就是在页面中被应用到的pjax,都要被包含,否则js会在第一次执行pjax后失效

    botkenni
  • 超全面!如何用 GitHub 从零开始搭建一个博客 ?

    之前小吴写过一篇如何使用 GitHub 搭建个人博客的文章:【新手向】从零开始搭建一个酷炫免费的个人博客

    五分钟学算法
  • 主题的隐藏功能

    如果时间久了对一种颜色不喜欢了,怎么办?那么就来换一个颜色,黄色、绿色、红色还有各种中国色...随你挑!

    飞翔的竹蜻蜓
  • 如何用 GitHub 从零开始搭建一个博客?

    作为目前全球最大的程序员社区,GitHub 能做的可不仅仅是托管源码这一操作,你还可以使用 GitHub 的 Pages 功能来搭建一个属于自己的博客,在上面写...

    GitHubDaily
  • WebMaster 123 - 如何选择适合你的博客主题

    本篇,作为 WebMaster 系列咕咕咕了两三个月以后的第一篇,先超前一下,我们今天谈谈如何选择适合你的博客主题。

    惶心
  • 利用 GitHub 从零开始搭建一个博客

    趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了。这里写一篇文章顺手记录了下来。不过这篇原创我发在了 Night...

    崔庆才
  • Prism代码高亮Pjax重载函数

    最近给博客加入了代码高亮的功能,发现直接访问文章页面有代码高亮 但是进首页再点击文章页后,代码高亮消失,刷新才行 发现是Pjax的问题,解决后就在此做个记录并分...

    HCG_Sky
  • handsome主题下载:一款十分华丽且功能强大的Typecho主题

    在复杂中,保持简洁。 如你所见,这是一款花费很长时间才得以完成的主题。在功能强大和体积轻巧中不断权衡,然后呈现在你的面前。 为了更好地创作,为了更好记录生活。 ...

    梦溪

扫码关注云+社区

领取腾讯云代金券