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 百度統計失效解決(小指親測)

 

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