博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
阅读量:7034 次
发布时间:2019-06-28

本文共 2813 字,大约阅读时间需要 9 分钟。

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

或者看本站文章:

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

准备文件 

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

jquery-1.11.1.min.js

jquery.pjax-1.8.2.min.js

 

下载到模板的 scripts 目录下后将下面两句添加到</head>所有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标记前插入下面代码

点击预览

    
        
    

没有用音乐插件的需要在模板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标签前添加下面这段代码:

点击预览

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

 

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

点击预览

    
        
    

 

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

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

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

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

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

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

 

将javascript添加到 echo_log.php 的容器

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

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

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

解决代码高亮问题添加:

admin/editor/plugins/code/prettify.js" data-no-instant>

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

 

解决百度统计问题:

 

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

转载地址:http://pcyal.baihongyu.com/

你可能感兴趣的文章
oracle 修改表名几种方法
查看>>
deepin15.4配置nginx时出现主页展现,其他全部找不到的问题
查看>>
7.31 11.10-11.13
查看>>
ffmpeg + libx265 issue
查看>>
python基础一:之字符串
查看>>
mysql数据库迁移、多端口运行、innobackupex备份
查看>>
why you should visit cemeteries
查看>>
JEESZ分布式框架--技术介绍文档
查看>>
Mysql之事务提交和隔离级别
查看>>
Java学习lesson 06
查看>>
最近跟同事学了docker 私有仓库安装,我自己居然没搞出来,现在来做做笔记
查看>>
Linux学习笔记(八)文件和目录权限chmod、更改所有者和所属组chown、umask、隐藏权限...
查看>>
配置设备作为DHCP中继
查看>>
类成员函数的重载、覆盖和隐藏区别?
查看>>
win10家庭版远程桌面函数不受支持
查看>>
mysql主从同步搭建和故障排除
查看>>
配置nginx动静分离
查看>>
Confluence 6 找到未使用的空间
查看>>
隱私權政策
查看>>
第14章 使用DHCP动态管理主机地址
查看>>