什么是Pjax?
Pjax是一种很多网站( facebook, twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后的这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。Pjax是可以增加访客打分的好功能。

为何要添加此功能?
1.有助于提升访问质量。
2.极大地减小了服务器的资源消耗。
如何添加?
① 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入。
引用格式:
- <script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>
②编辑Footer(底部文件),添加此代码。
绑定本页面非新窗口打开的所有本域链接,链接点击后,替换contentleft容器内容为新内容contentleft,ajax超时时间8秒
- <script>
- $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});</script>
如果jq失效怎么办?
问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。
问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。
解决方法:利用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>
汇总起来,就是下段:
- <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>
- <script type="text/javascript" src="//24bp.cn/mine/pjax.js"></script>
- <div class="pjax_loading"></div>
- <script>
- $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
- $(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
- $(".pjax_loading").css("display", "block");
- });
- $(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
- $(".pjax_loading").css("display", "none");
- pajx_loadDuodsuo();
- });
- 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这样就添加成功了!
WordPress如何添加Pjax?
WordPress最简单的全站Pjax教程,最简单wp主题设置pjax,就一个js调用修改一下js里的自定义内容的id属性就可以了,修改下面代码的page为你的id属性,注本文末有下载链接,下面代码只是自定义的那一部分要修改下载的,调用代码添加到主题页脚或页眉文件都可以。
Js自定义:
- // 自定义
- $(function() {
- $(document).pjax('a[target!=_blank]', '#page', {fragment:'#page', timeout:6000});
- $(document).on('pjax:send', function() {
- $('#page').fadeTo(700,0.0);
- });
- $(document).on('pjax:complete', function() {
- $('#page').fadeTo(700,1);
- });
- });
调用代码:
- <script src="/路径/pjax.js"></script>
本文作者为飞鸟投林,转载请注明。