INLOJV封裝的自用WordPress全站PJAX代碼。包括最簡單的評論ajax，更快速的前進(jìn)后退功能
羊年起不再折騰WordPress了，可以看到本站近期文章不存在什么wordpress關(guān)鍵字，也因?yàn)槔嫌腥伺軄砑観問我這個(gè)東西怎么搞，所以本人就封裝了這個(gè)，不僅僅是頁面pjax。其實(shí)網(wǎng)上教程有很多了，但不是全站的，搜索、評論等還要另外寫，下面這個(gè)就不必了，包括最簡單的評論ajax，更快速的前進(jìn)后退功能。本篇是wp相關(guān)的最后一篇文章。
首先請看本站PJAX教程
注：代碼極不規(guī)范（我本來就不是專業(yè)的），喜歡就拿去吧，不過若要轉(zhuǎn)載就請保留本站一個(gè)鏈接。
特別建議：有一定js基礎(chǔ)的朋友使用，能自己優(yōu)化就自己優(yōu)化，沒接觸過的還是別折騰了，不會(huì)則自行百度，下面的注釋都是我當(dāng)初一句句百度折騰學(xué)習(xí)jq才加上去的。
//————————————————————————————————————
// Packaged PJAX By INLOJV 2015.01.09
// 頁面、搜索、評論、評論分頁 PJAX
//————————————————————————————————————
// ——————————————————————— AJAX-評論、搜索、分頁 等
var ajx_main = '#main' , // 要替換的主體id，改為你文章部分的容器
ajx_a = 'a' , // a標(biāo)簽，自己添加排除規(guī)則
ajx_comt = 'comments' , // 整個(gè)評論區(qū)的id ,不加#
ajx_submit_form = '#comment_form' , // 提交按鈕所在的表單
ajx_comtlist = '.comment-list' , // 評論列表id或class
ajx_comtpagenav = '.pagenav' , // 評論分頁導(dǎo)航的id或class
ajx_comtpagenav_a = '.pagenav a' , // 評論分頁導(dǎo)航的a標(biāo)簽
ajx_sform = '.inlo-search form' , // 搜索表單form標(biāo)簽
ajx_skey = '.s-key' ; // 搜索表單input標(biāo)簽內(nèi)的id或class
function reload_func(){
// 這里放置需要重載的JS或函數(shù)
}
$(function() {
a(); //pushState初始化執(zhí)行一次
});
// 建立錨點(diǎn)函數(shù)，用于跳轉(zhuǎn)后的滾動(dòng)定位，使用這個(gè)主要是有側(cè)欄評論帶#號時(shí)能在請求后定位到該條評論的位置
function body_am(id) {
id = isNaN(id) ? $('#' + id).offset().top : id;
$("body,html").animate({
scrollTop: id
}, 0);
return false;
}
function to_am(url) {
var anchor = location.hash.indexOf('#'); // 用indexOf檢查location.href中是否含有'#'號，如果沒有則返回值為-1
anchor = window.location.hash.substring(anchor + 1);
body_am(anchor);
}
// 主頁地址，用于下面的提交函數(shù)
var home_url = document.location.href.match(/http:\/\/([^\/]+)\//i)[0];
// 函數(shù)： 替換url，用于評論ajax提交
function replaceUrl(url, domain) {
return url.replace(/http:\/\/([^\/]+)\//i, domain);
}
// 函數(shù)：從封裝的Json獲取
function getFormJson(frm) {
var o = {};
var a = $(frm).serializeArray();
$.each(a,
function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
// 函數(shù)：更新瀏覽器歷史緩存（用于瀏覽器后退）
function l(){
history.replaceState( // 刷新歷史點(diǎn)保存的數(shù)據(jù)，給state填入正確的內(nèi)容
{ url: window.document.location.href,
title: window.document.title,
html: $(document).find(ajx_main).html(), // 抓取主體部分outerHTML用于呈現(xiàn)新的主體。也可以用這句 html: $(ajx_main).prop('outerHTML'),
}, window.document.title, document.location.href);
}
// 函數(shù)：頁面載入初始一次，解決Chrome瀏覽器初始載入時(shí)產(chǎn)生ajax效果的問題,并且監(jiān)聽前進(jìn)后退事件
function a(){
window.addEventListener( 'popstate', function( e ){ //監(jiān)聽瀏覽器后退事件
if( e.state ){
document.title = e.state.title;
$(ajx_main).html( e.state.html ); //也可以用replaceWith ，最后這個(gè)html就是上面替換State后里面的html值
// 重載js
window.load = reload_func(); // 重載函數(shù)
}
});
}
//函數(shù)：AJAX核心
function ajax(reqUrl, msg, method, data) {
if (msg == 'pagelink' || msg == 'search') { // 頁面、搜索
$(ajx_main).fadeTo('slow',0.6);
} else if ( msg == 'comment' ){ // 評論提交
$('#' + ajx_comt).fadeTo('slow',0.5);
} else if ( msg == 'comtpagenav' ){ // 評論分頁時(shí)
$(ajx_comtlist).fadeTo('slow',0.5);
$(ajx_comtpagenav).fadeTo('slow',0.8);
}
$.ajax({
url: reqUrl,
type: method,
data: data,
beforeSend : function () { //加載前操作 這個(gè)必須放在window.history.pushState()之前，否則會(huì)出現(xiàn)邏輯錯(cuò)誤。
l(); //刷新歷史點(diǎn)內(nèi)容，這個(gè)必須放在window.history.pushState()之前，否則會(huì)出現(xiàn)邏輯錯(cuò)誤。
},
success: function(data) {
if (msg == 'pagelink' || msg == 'search') { // 又如果msg為 頁面 或 搜索—— 【1】
$(ajx_main).html($(data).find(ajx_main).html()) ; // 替換原#main的內(nèi)容
$(ajx_main).fadeTo('normal',1);
} else if (msg == 'comment') { // 又如果msg為 評論回復(fù)——————————【2】
$('#' + ajx_comt).html($(data).find('#' + ajx_comt).html());// 評論列表滑出
$('#' + ajx_comt).fadeTo('normal',1);
$("body,html").animate({scrollTop:$('#'+ajx_comt).offset().top}, 900); // 定位返回評論ID頂部
} else if (msg == 'comtpagenav') { // 又如果msg為 評論分頁——【3】
var content = $(data).find(ajx_main).html();
var pagedstring = $(data).find(ajx_comtpagenav).html();
$(ajx_main).html(content);
$(ajx_comtpagenav).html(pagedstring);
$(ajx_comtlist).fadeTo('normal',1); // 評論列表顯示
$(ajx_comtpagenav).fadeTo('normal',1); // 評論分頁顯示
$("body,html").animate({scrollTop:$(ajx_comtlist).offset().top}, 600);
}
document.title = $(data).filter("title").text(); // 瀏覽器標(biāo)題變更
if (msg != 'comment') { // —— 不為后退 也 不為評論回復(fù)時(shí)
var state = { // 設(shè)置state參數(shù)
url: reqUrl,
title: $(data).filter("title").text(),
html: $(data).find(ajx_main).html(),
};
// 將當(dāng)前url和歷史url添加到瀏覽器當(dāng)中，用于后退。里面三個(gè)值分別是: state, title, url
window.history.pushState(state, $(data).filter("title").text(), reqUrl);
}
},
complete: function() { // ajax完成后加載
// 代碼重載區(qū)
if (msg == 'pagelink') { // 若msg為 頁面鏈接
to_am(reqUrl) ;// 定位到相應(yīng)鏈接位置,這個(gè)必須放在window.history...之后執(zhí)行，否則遇到帶#號的鏈接，再點(diǎn)擊其他鏈接地址欄就無法改變
}
window.load = reload_func(); // 重載函數(shù)
},
timeout: 5000, // 超時(shí)長度
error: function(request) { // 錯(cuò)誤時(shí)的處理
if (msg == msg == 'pagelink' || msg == 'search'){
location.href = reqUrl; //直接刷新跳轉(zhuǎn)到請求的頁面鏈接
} else if (msg == 'comment') { // 若msg為評論回復(fù)
alert($(request.responseText).filter("p").text()); // 彈出警告,這個(gè)是必需的，如果刪除那么提交錯(cuò)誤時(shí)就會(huì)打開空白頁面
$('#' + ajx_comt).fadeTo('normal',1);
} else if ( msg == 'comtpagenav' ) {
$(ajx_comtlist).fadeTo('normal',1); // 警告后評論區(qū)顯示
$(ajx_comtpagenav).fadeTo('normal',1); // 警告后評論區(qū)顯示
} else {
location.href = reqUrl; //頁面錯(cuò)誤時(shí)跳轉(zhuǎn)到請求的頁面
}
},
});
}
//頁面ajax
$('body').on("click",ajx_a,
function() {
ajax($(this).attr("href"), 'pagelink');
return false;
});
//評論ajax
$('body').on('submit',ajx_submit_form,
function() {
ajax(replaceUrl(this.action, home_url), 'comment', 'POST', getFormJson(this));
return false;
});
//搜索ajax
$('body').on('submit',ajx_sform,
function() {
ajax(this.action + '?s=' + $(this).find(ajx_skey).val(), 'search');
return false;
});
//評論分頁ajax
$('body').on("click",ajx_comtpagenav_a,
function() {
ajax($(this).attr("href"), 'comtpagenav');
return false;
});