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>
参数解释:
a[target!=_blank]:绑定本页面非新窗口打开的所有链接
#contentleft:链接点击之后,仅仅更新#contentleft容器的内容,页面其他内容不变,需自行修改这个参数
fragment:'#contentleft':#contentleft选择器的碎片从Ajax响应提取
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 百度统计失效解决(小指亲测)
好啦,完美解决了吧,哈哈哈^_^
转载于:https://www.cnblogs.com/telwanggs/p/7136743.html
emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题相关推荐
- 一行代码实现全站pjax无刷新加载
之前也没有研究过pjax,但是没事走访别人博客时看到不少经过pjax的网站,响应速度很快,今天一篇<一行代码实现全站pjax无刷新加载>测试后发发现效果确实不错,但是由于我是老的媒体范板子 ...
- 使用 pjax 实现网站无刷新加载
之前也没有研究过pjax,但是没事走访别人博客时看到不少经过pjax优化的网站,响应速度很快,今天看到玖梦博客的一篇<一行代码实现全站pjax无刷新加载>测试后发发现效果确实不错,故发文记 ...
- WordPress自适应白天暗夜高颜值无刷新加载首页支持三种布局 v2.4
一款基于WordPress开发的高颜值的自适应主题,支持白天与黑夜模式.首页支持三种布局:博客风格,cms风格,企业风格 主题特性 支持白天与暗黑模式 全局无刷新加载 支持博客与CMS布局 内置WP优 ...
- WordPress自适应白天暗夜无刷新加载三种布局模板源码
一款基于Wordpress开发的高颜值的自适应主题,支持白天与黑夜模式.首页支持三种布局:博客风格,cms风格,企业风格 主题特性: 支持白天与暗黑模式 全局无刷新加载 支持博客与CMS布局 内置WP ...
- php pjax数据返回,如何将Pjax整合进网站,实现全站无刷新加载?
摘要: pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入HTML网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后退 ...
- pjax php demo,Pjax无刷新加载页面基础示例
前言 今天浏览了一些精美的前端页面,然后看见有些页面运用了Pjax,让整个页面加载很快.之前很久就想去看看Pjax是怎么实现的了,今天就去了解了一下,然后懂得了他的运行原理.下面就来分享一下. 运行原 ...
- jquery完成界面无刷新加载登陆注册
昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击! ...
- Jquery导航条淡进淡出相册(动态无刷新加载数据库数据)
原理:AJAX动态加载数据库中图片信息给游览器,利用2个叠词div动态修改内部图片透明度做出淡进淡出效果.(IE6无效) 难点:json数组操作. HTML:就是几个图片容器.加载大图的div pos ...
- WordPress自适应主题Puock v2.4/白天暗夜高颜值无刷新加载首页支持三种布局
☑️ 编号:ym418 ☑️ 品牌:WordPress ☑️ 语言:php ☑️ 大小:1.85MB ☑️ 类型:自适应主题 ☑️ 支持:pc+wap
最新文章
- mysql 的S 锁和X锁的区别
- Spring面试题和答案
- Linux 之八 完整嵌入式 Linux 环境、(交叉)编译工具链、CPU 体系架构、嵌入式系统构建工具
- c++详解【new和delete】
- ubuntu安装谷歌浏览器 typora+出现编码错误‘ascii‘ codec can‘t encode character ‘\u6b66‘+docker里安装tensorrt报错
- 泰山医学院计算机文化基础,泰医 专 计算机 16级.pdf
- 永恒之塔 java_AionChs
- 如何通俗易懂地解释卷积?(2)
- Rancher2.5入门——安装Rancher
- 华文行楷字帖欣赏_著名男演员姜文,8幅精品书法作品欣赏,专家:姜文的字还未入门...
- JAVA日常游玩-----用EnumMap优化代码。
- 数论基础——扩展欧几里德算法解析
- Jenkins--发送邮件配置
- 渗透第一个靶机 shop1.0 (还是简单渗透版)
- 基金投资入门3:中外常见金融指数类型说明
- 集体封盘,深度回撤,量化私募的高光时刻已不再?
- SpringMVC核心知识的梳理(现在都用SpringBoot了,但是SpringMVC还的学的扎实点,饮水思源)
- 计算机华科与电子科技大学哪个好,华中科技大学、电子科技大学、中国科学技术大学,哪所实力最强?...
- linux的ps1设置
- 马云最新演讲:真正的强者,是在最孤立无援的时刻,依然坚持到底
热门文章
- (20)Xilinx FPGA型号(FPGA不积跬步101)
- FPGA UART总线协议简介
- 用java编写一个课表串口,安卓课程表源代码
- java面试算法总结_java编程面试过程中常见的10大算法概念汇总
- 12011.linux之看门狗应用开发
- 如何测量代码运行时间
- python 24位图转 8位_Python爬取PPT模板小工具下载-Python爬取PPT模板小工具免费版下载v1.0...
- STM32-SPI通信
- 数据结构之内部排序二
- arm-2009q1-203-arm-none-linux-gnueabi.bin执行错误解决