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

2021-10-13 21:02:30

想要更详细了解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 百度统计失效解决(小指亲测)

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

上一篇：微信页面script标签添加crossorigin=“anonymous”导致页面加载失败


下一篇：java中的那些坑