Zblog全站PJAX局部刷新的方法
时间：4年前 阅读：2347
研究了半天才研究了出了这个方法，上百度查了5个小时，都没有一个切实有用的。
网上现有的教程，不是少这段代码，就是少那段代码，东拼西凑出来是牛头马面的东西，坑！全然没有diao用！
还是最后我下载了一个Zblog的PJAX模板，自己慢慢扒出来的，按道理这个是方法是通用的。
以前写过一个Emlog的PJAX教程，当时也是一知半解，虽然依葫芦画瓢做出来了全站jpax，但站点内还存在一定程度的错误今天才解决。
一、首先是header部分，需要引用两个js和一段css代码：
a.两段引用，引用在网页<title>标签前；
<!--PJAX header--> <script src="http://www.aswait.com/zb_users/upload/2019/05/jquery.js" type="text/javascript"></script> <script src="http://www.aswait.com/zb_users/upload/2019/05/pjax.js" type="text/javascript"></script>
b.一段css，引用在网站的style.css内，更多方法、方式参见引用的第二、三篇文章；
.pjax_loading {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #4c4c4c;opacity: 0.3;background: url('images/wpgo_loading.gif') #4c4c4c 50% 50% no-repeat;}另一个封装一下：
<link href="http://www.aswait.com/zb_users/upload/2019/05/pjax.css" rel="stylesheet" type="text/css" />
二、在<body>标签下方插入<div>标签，</div>自己看着办
<body> <div id="all">
三、在</body>上方添加以下代码
<!--PJAX footer-->
<div class="pjax_loading"></div>
<script>
$(document).pjax('a[target!=_blank]', '#all', {fragment:'#all', timeout:8000});
$(document).on('pjax:send', function() {
$(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() {
$(".pjax_loading").css("display", "none");
pajx_loadDuodsuo();
});
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>
<script>
$(document).on("submit", "form", "btnPost",
function(a) {
$.pjax.submit(a, "#all", {
fragment: "#all",
timeout: 8000
})
});
</script>参数解释：
a[target!=_blank]：绑定本页面非新窗口打开的所有链接
#all：链接点击之后，仅仅更新#all容器的内容，页面其他内容不变，需自行修改这个参数
fragment:‘#contentleft‘：#contentleft选择器的碎片从Ajax响应提取
timeout:8000：Ajax超时时间为8秒，如果未响应则直接刷新网页
（不要考虑那么多，也不要修改，实在不行直接引用）
四*、在</body>下方插入你的音乐播放器
<!--music--> <div id="contentleft"><script src="https://free.limh.me/api/player.php?id=79588724&jq=y&font=y" type="text/javascript"></script></div>
网友评论