好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题

想要更详细了解pjax,需要查看官网

或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译)

效果看本站,音乐无刷新播放,代码高亮和复制js加载成功~

准备文件 

编辑模板 header.php 的 head 添加必要文件:

jquery-1.11.1.min.js百度网盘下载

jquery.pjax-1.8.2.min.js百度网盘下载


下载到模板的 scripts 目录下后将下面两句添加到</head>所有script标签的最前面:

<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>scripts/jquery.pjax-1.8.2.min.js"></script>

注意:jQuery需要1.7.0版本以上的才有pushState的封装

使用pjax 

编辑模版 footer.php 在/body标记结束前插入:

< script  type="text/javascript">
 $(document).pjax('a[target!=_blank]', '#contentleft', {fragment: '#contentleft',timeout: 8000}); 
 < /script>

参数解释:

  1. a[target!=_blank]:绑定本页面非新窗口打开的所有链接

  2. #contentleft:链接点击之后,仅仅更新#contentleft容器的内容,页面其他内容不变,需自行修改这个参数

  3. fragment:'#contentleft':#contentleft选择器的碎片从Ajax响应提取

  4. timeout:8000:Ajax超时时间为8秒,如果未响应则直接刷新网页

注意:这个 #contentleft 怎么找呢?

    小指的方法是打开模板的 echo_log.php,找到包裹文章页面的 div 的 id 就是了,一般是第一第二个

    id 名字都是 contentleft,content或者main之类的,按照这个方法一般都可以了,如果不行回我吧~


解决pjax的缓冲--加入等待动画

编辑模板 footer.php 在/body标记前插入下面代码

<div class="qingzz_pjax_loading">
    <div class="qingzz_pjax_spinner">
        <div class="qingzz_pjax_rect1"></div>
	<div class="qingzz_pjax_rect2"></div>
	<div class="qingzz_pjax_rect3"></div>
	<div class="qingzz_pjax_rect4"></div>
	<div class="qingzz_pjax_rect5"></div>
    </div>
</div>
<script>
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".qingzz_pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".qingzz_pjax_loading").css("display", "none");
});
</script>

没有用音乐插件的需要在模板css文件末尾添加css:

.qingzz_pjax_loading {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background-color: rgba(90,90,90,.5);
	display: none;
}
.qingzz_pjax_spinner {
  margin: 300px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
.qingzz_pjax_spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.qingzz_pjax_spinner .qingzz_pjax_rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.qingzz_pjax_spinner .qingzz_pjax_rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.qingzz_pjax_spinner .qingzz_pjax_rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.qingzz_pjax_spinner .qingzz_pjax_rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


刷新一下,挺酷的吧~

解决无法提交和多说不加载问题:

编辑模板的 footer.php,在/body标签前添加下面这段代码:

<script>
$(document).on('submit', 'form', function(event) {// 解决提交失效问题
    $.pjax.submit(event, '#contentleft', {fragment: '#contentleft',timeout: 8000});
 });
$(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>

里面的#contentleft一样需要改成前面的容器id哦~


总结footer.php需要添加的代码:

<div class="qingzz_pjax_loading">
    <div class="qingzz_pjax_spinner">
        <div class="qingzz_pjax_rect1"></div>
	<div class="qingzz_pjax_rect2"></div>
	<div class="qingzz_pjax_rect3"></div>
	<div class="qingzz_pjax_rect4"></div>
	<div class="qingzz_pjax_rect5"></div>
    </div>
</div>
<script>
// 绑定链接和容器
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment: '#contentleft',timeout: 8000}); 
$(document).on('submit', 'form', function(event) {// 解决提交失效问题
    $.pjax.submit(event, '#contentleft', {fragment: '#contentleft',timeout: 8000});
 });
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".qingzz_pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".qingzz_pjax_loading").css("display", "none");
    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>


解决容器中javascript事件失效的问题:重点

问题:pjax之后多说评论框不加载,ajax评论不能提交等等问题。 

问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。 

解决方法一:利用pjax的加载完成回调函数,重新绑定事件。

解决方法二:将javascript添加到 echo_log.php 的容器,一般加到容器末尾,即/div标签上面。

更准确的方法查看本站文章:

pjax javascript失效解决(小指亲测)


将javascript添加到 echo_log.php 的容器

原理是容器里面的内容是会刷新重新加载的,所以把javascript放在这里会重新加载~    

这里只列出常用的,其他具体的自行摸索添加吧~

最好放到容器末尾/div前面哦~    

解决代码高亮问题添加:

<script src="<?php echo BLOG_URL; ?>admin/editor/plugins/code/prettify.js" data-no-instant></script>
<script>prettyPrint();</script>

解决CNZZ统计问题,前面是解释具体方法在最后:

pjax CNZZ统计失效解决(小指亲测)


解决百度统计问题:

pjax 百度统计失效解决(小指亲测)


好啦,完美解决了吧,哈哈哈^_^



点赞15
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
pcqx.shanxin99.com
 pcqx.shanxin99.com 2018-09-10 21:50回复
#8
能实现你的梦想!能开始你的创业之路!加入我们成就你...
有意做网站者请进:http://shanxin99.com/jz
有意赚钱者请进:http://shanxin99.com/sc
Q79852715 群13202278
颜涛
 颜涛 2017-10-20 17:03回复
#7
成功添加后没有问题,但是跳转到文章页的时候,那个加载样式一直存在。
kidultff
 kidultff 2017-04-04 20:48回复
#6
给博主点一个大大的赞!!!成功啦~非常感谢教程,还有《我的心里是满的》很好听!迷津渡口迷津渡口迷津渡口
现在博客
 现在博客 2017-03-13 22:10回复
#5
博主真细心,还有实例,终于搞懂了Pjax的原理了迷津渡口迷津渡口https://blog.ogdn.net
好玩资源网
 好玩资源网 2017-02-11 13:01回复
#4
不错的!感谢分享,去试试自己的网站!
点赞成功!点赞时间:2017年2月11日 中午1时5分10秒,赠人玫瑰,手有余香!
迷津渡口
SECRET
 SECRET 2016-11-10 20:11回复
#3
感谢,调试完成了。迷津渡口
小指
 小指 2016-11-10 21:51回复
@SECRET:嗯,有用就好.
博客音乐播放器使用方法值得推广,方便又美观,背景也很漂亮哦^_^
SECRET
 SECRET 2016-11-10 21:59回复
@小指:谢谢~
boyhero
 boyhero 2016-10-25 05:10回复
#2
迷津渡口下载不了 ! pjax 和 jquery 能不能 城通网盘 一下 !
点赞成功!点赞时间:2016年10月25日 凌晨5时8分56秒,赠人玫瑰,手有余香!
小指
 小指 2016-10-25 09:43回复
@boyhero:百度网盘打不开我写了个教程你尝试一下能否解决你的问题。
其实解决问题的方法还可以是自己查找,这种文件网上还是有很多途径可以找到的^_^
学习使用搜索引擎,资源其实很多的,特别如果你也在尝试网页网站的制作。
网络本应该对你不会有拘束,因为任何放在网上的资源都可以尝试获得,包括国外国内的资源~

啰嗦了这么多,城通网盘地址:

jquery:http://page27.ctfile.com/fs/mT4159331321
pjax:http://page27.ctfile.com/fs/jKT159331339
boyhero
 boyhero 2016-10-25 09:51回复
@小指:我知道方法 用vpn 或者 换个 host 都可以 但上次用了 vpn 结果去了 国保大队 迷津渡口
小指
 小指 2016-10-25 09:57回复
@boyhero:迷津渡口这么严重,以后分享资源加上城通网盘,我也是刚了解到这种情况^_^
boyhero
 boyhero 2016-10-25 10:02
@小指:分享资源加上城通网盘 我给你点广告 迷津渡口
点赞成功!点赞时间:2016年10月25日 上午10时3分18秒,赠人玫瑰,手有余香!
苏苏
 苏苏 2016-04-26 21:17回复
#1
javascript重新加载  请问怎么做呢?
小指
 小指 2016-04-27 09:32回复
@苏苏:正如上文所述
方法一:将script添加到重新加载的容器div,容器刷新时它也会运行
方法二:在回调函数里重新将需要绑定的事件绑定$(selector).live()
方法三:将需要重新调用的代码包装在一个函数里,在回调函数里面调用

最后:个人感觉这个功能不要滥用,否则你会发现网页打开变得更慢了,本站未使用~
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸