^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 若文中代码有问题,可能是少了几个问号,留言一定会解决!
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 站点文章结尾新增了赞赏通道
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

封装的WordPress全站PJAX排除规则怎么写

昨天,有 vip 群的小朋友问陌小雨,网上 inlojv 大神分享的 WordPress 全站 PJAX 代码 里面有个说明不是很明白,具体应该怎么写呢?

陌小雨测试了下,先贴出这个全站 pjax 代码:

//————————————————————————————————————
//  Packaged PJAX By INLOJV 2015.01.09
//  页面、搜索、评论、评论分页 PJAX
//————————————————————————————————————

// ——————————————————————— AJAX-评论、搜索、分页 等
var ajx_main = '#main' , // 要替换的主体 id,改为你文章部分的容器
ajx_a = 'a' , // a 标签,自己添加排除规则
ajx_comt = 'comments' , // 整个评论区的 id ,不加#
ajx_submit_form = '#comment_form' , // 提交按钮所在的表单
ajx_comtlist = '.comment-list' , // 评论列表 id 或 class
ajx_comtpagenav = '.pagenav' , // 评论分页导航的 id 或 class
ajx_comtpagenav_a = '.pagenav a' , // 评论分页导航的 a 标签
ajx_sform = '.inlo-search form' , // 搜索表单 form 标签
ajx_skey = '.s-key' ; // 搜索表单 input 标签内的 id 或 class
function reload_func(){
    // 这里放置需要重载的 JS 或函数
}


$(function() {    
    a(); //pushState 初始化执行一次
});
// 建立锚点函数,用于跳转后的滚动定位,使用这个主要是有侧栏评论带#号时能在请求后定位到该条评论的位置
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);
}
// 主页地址,用于下面的提交函数
var home_url = 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(ajx_main).html(), // 抓取主体部分 outerHTML 用于呈现新的主体。也可以用这句 html: $(ajx_main).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;
            $(ajx_main).html( e.state.html ); //也可以用 replaceWith ,最后这个 html 就是上面替换 State 后里面的 html 值                
            // 重载 js
            window.load =  reload_func(); // 重载函数
        }
    });    
}
//函数: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' ){ //  评论分页时
        $(ajx_comtlist).fadeTo('slow',0.5);
        $(ajx_comtpagenav).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】
                $(ajx_main).html($(data).find(ajx_main).html()) ; // 替换原#main 的内容
                $(ajx_main).fadeTo('normal',1);
            } else if (msg == 'comment') { // 又如果 msg 为 评论回复——————————【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(); // 浏览器标题变更
            if (msg != 'comment') { // —— 不为后退 也 不为评论回复时
                var state = { // 设置 state 参数
                    url: reqUrl,
                    title: $(data).filter("title").text(),
                    html: $(data).find(ajx_main).html(),
                };
                // 将当前 url 和历史 url 添加到浏览器当中,用于后退。里面三个值分别是: state, title, url
                window.history.pushState(state, $(data).filter("title").text(), reqUrl);
            }
        },
        complete: function() { // ajax 完成后加载
            // 代码重载区
            if (msg == 'pagelink') { // 若 msg 为 页面链接
                to_am(reqUrl) ;// 定位到相应链接位置,这个必须放在 window.history...之后执行,否则遇到带#号的链接,再点击其他链接地址栏就无法改变
            } 
            window.load =  reload_func(); // 重载函数
        },
        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()); // 弹出警告,这个是必需的,如果删除那么提交错误时就会打开空白页面
                $('#' + ajx_comt).fadeTo('normal',1); 
            } else if ( msg == 'comtpagenav' ) {
                $(ajx_comtlist).fadeTo('normal',1); // 警告后评论区显示
                $(ajx_comtpagenav).fadeTo('normal',1); // 警告后评论区显示
            } else {
                location.href = reqUrl; //页面错误时跳转到请求的页面
            }
        },
    });
}
//页面 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;
});

总感觉这个排除规则说的很费解,如果设置了,那只有这里的 a 标签是生效的,为什么又说是排除呢?以陌小雨博客为例,只希望文章下方和侧边的 a 标签能够生效,只需要在那里填入如下代码即可:

ajx_a = '.relates a,.widget_postlist a' ,

代码其他地方的也都注释的很清楚,根据自己的主题修改哦。 有啥问题可以到我公众号后台留言。

历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

评论 4

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 楚狂人博客
    博主,你这个打开首页自动弹出抢红包是怎么做到的?回复
  2. 木先森
    我也想问怎么实现黑名单模式,白名单要添加的太多了,用排除法最好。回复
  3. 云落
    这个不错,真需要,话说这个规则貌似是白名单模式,不太好,应该是黑名单模式,即特别的几个不用,其他都用回复

登录

忘记密码 ?

切换登录

注册