【www.bbyears.com--WordPress】
var ajxmain = "#main" , // 要替换的主体id，改为你文章部分的容器
ajxa = "a" , // a标签，自己添加排除规则
ajxcomt = "comments" , // 整个评论区的id ,不加#
ajxsubmitform = "#commentform" , // 提交按钮所在的表单
ajxcomtlist = ".comment-list" , // 评论列表id或class
ajxcomtpagenav = ".pagenav" , // 评论分页导航的id或class
ajxcomtpagenava = ".pagenav a" , // 评论分页导航的a标签
ajxsform = ".inlo-search form" , // 搜索表单form标签
ajxskey = ".s-key" ; // 搜索表单input标签内的id或class
function reload_func(){
// 这里放置需要重载的JS或函数
}
$(function() {
a(); //pushState初始化执行一次
});
// 建立锚点函数，用于跳转后的滚动定位，使用这个主要是有侧栏评论带#号时能在请求后定位到该条评论的位置
function bodyam(id) {
id = isNaN(id) ? $("#" + id).offset().top : id;
$("body,html").animate({
scrollTop: id
}, 0);
return false;
}
function toam(url) {
var anchor = location.hash.indexOf("#"); // 用indexOf检查location.href中是否含有"#"号，如果没有则返回值为-1
anchor = window.location.hash.substring(anchor + 1);
bodyam(anchor);
}
// 主页地址，用于下面的提交函数
var homeurl = document.location.href.match(/http://([^/]+)//i)[0];
// 函数： 替换url，用于评论ajax提交
function replaceUrl(url, domain) {
return url.replace(/http://([^/]+)//i, domain);
}
// 函数：从封装的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;
}
// 函数：更新浏览器历史缓存（用于浏览器后退）
function l(){
history.replaceState( // 刷新历史点保存的数据，给state填入正确的内容
{ url: window.document.location.href,
title: window.document.title,
html: $(document).find(ajxmain).html(), // 抓取主体部分outerHTML用于呈现新的主体。也可以用这句 html: $(ajxmain).prop("outerHTML"),
}, window.document.title, document.location.href);
}
// 函数：页面载入初始一次，解决Chrome浏览器初始载入时产生ajax效果的问题,并且监听前进后退事件
function a(){
window.addEventListener( "popstate", function( e ){ //监听浏览器后退事件
if( e.state ){
document.title = e.state.title;
$(ajxmain).html( e.state.html ); //也可以用replaceWith ，最后这个html就是上面替换State后里面的html值
// 重载js
window.load = reloadfunc(); // 重载函数
}
});
}
//函数：AJAX核心
function ajax(reqUrl, msg, method, data) {
if (msg == "pagelink" || msg == "search") { // 页面、搜索
$(ajxmain).fadeTo("slow",0.6);
} else if ( msg == "comment" ){ // 评论提交
$("#" + ajxcomt).fadeTo("slow",0.5);
} else if ( msg == "comtpagenav" ){ // 评论分页时
$(ajxcomtlist).fadeTo("slow",0.5);
$(ajxcomtpagenav).fadeTo("slow",0.8);
}
$.ajax({
url: reqUrl,
type: method,
data: data,
beforeSend : function () { //加载前操作 这个必须放在window.history.pushState()之前，否则会出现逻辑错误。
l(); //刷新历史点内容，这个必须放在window.history.pushState()之前，否则会出现逻辑错误。
},
success: function(data) {
if (msg == "pagelink" || msg == "search") { // 又如果msg为 页面 或 搜索—— 【1】
$(ajxmain).html($(data).find(ajxmain).html()) ; // 替换原#main的内容
$(ajxmain).fadeTo("normal",1);
} else if (msg == "comment") { // 又如果msg为 评论回复——————————【2】
$("#" + ajxcomt).html($(data).find("#" + ajxcomt).html());// 评论列表滑出
$("#" + ajxcomt).fadeTo("normal",1);
$("body,html").animate({scrollTop:$("#"+ajxcomt).offset().top}, 900); // 定位返回评论ID顶部
} else if (msg == "comtpagenav") { // 又如果msg为 评论分页——【3】
var content = $(data).find(ajxmain).html();
var pagedstring = $(data).find(ajxcomtpagenav).html();
$(ajxmain).html(content);
$(ajxcomtpagenav).html(pagedstring);
$(ajxcomtlist).fadeTo("normal",1); // 评论列表显示
$(ajxcomtpagenav).fadeTo("normal",1); // 评论分页显示
$("body,html").animate({scrollTop:$(ajxcomtlist).offset().top}, 600);
}
document.title = $(data).filter("title").text(); // 浏览器标题变更
if (msg != "comment") { // —— 不为后退 也 不为评论回复时
var state = { // 设置state参数
url: reqUrl,
title: $(data).filter("title").text(),
html: $(data).find(ajxmain).html(),
};
// 将当前url和历史url添加到浏览器当中，用于后退。里面三个值分别是: state, title, url
window.history.pushState(state, $(data).filter("title").text(), reqUrl);
}
},
complete: function() { // ajax完成后加载
// 代码重载区
if (msg == "pagelink") { // 若msg为 页面链接
toam(reqUrl) ;// 定位到相应链接位置,这个必须放在window.history...之后执行，否则遇到带#号的链接，再点击其他链接地址栏就无法改变
}
window.load = reloadfunc(); // 重载函数
},
timeout: 5000, // 超时长度
error: function(request) { // 错误时的处理
if (msg == msg == "pagelink" || msg == "search"){
location.href = reqUrl; //直接刷新跳转到请求的页面链接
} else if (msg == "comment") { // 若msg为评论回复
alert($(request.responseText).filter("p").text()); // 弹出警告,这个是必需的，如果删除那么提交错误时就会打开空白页面
$("#" + ajxcomt).fadeTo("normal",1);
} else if ( msg == "comtpagenav" ) {
$(ajxcomtlist).fadeTo("normal",1); // 警告后评论区显示
$(ajxcomtpagenav).fadeTo("normal",1); // 警告后评论区显示
} else {
location.href = reqUrl; //页面错误时跳转到请求的页面
}
},
});
}
//页面ajax
$("body").on("click",ajxa,
function() {
ajax($(this).attr("href"), "pagelink");
return false;
});
//评论ajax
$("body").on("submit",ajxsubmitform,
function() {
ajax(replaceUrl(this.action, homeurl), "comment", "POST", getFormJson(this));
return false;
});
//搜索ajax
$("body").on("submit",ajxsform,
function() {
ajax(this.action + "?s=" + $(this).find(ajxskey).val(), "search");
return false;
});
//评论分页ajax
$("body").on("click",ajxcomtpagenava,
function() {
ajax($(this).attr("href"), "comtpagenav");
return false;
});