QQ爹の博客 QQ爹の博客

instantclick实现的全站无刷新

in 代码相关 read (1221) 974汉字 文章转载请注明来源!

instantclick是什么?

instantclick是一个预加载的js文件,就是能提前加载网页内容的东西,他有几种模式,第一种就是鼠标放在超链接上就开始预加载,第二种就是鼠标放上去xx毫秒后(时间可自定义)进行预加载,第三种就是鼠标点击后进行预加载。
项目官网:http://instantclick.io/
项目地址:https://github.com/dieulot/instantclick

使用这个预加载js

因为前两种方式可能比较浪费资源,所以我们使用鼠标点击后进行预加载方式,代码类似如下

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init('mousedown');</script>

注:我使用的是instantclick3.1.0的版本。这里不着重讲instantclick的使用方法,建议去官网查阅

搜索功能这样的非超链接怎么实现不刷新

香菇的点拨之下,我们强行将搜索功能表单模式变成了超链接,效果如下

因为搜索结果地址一般为是站点地址加search加搜索内容如https://qqdie.com/search/搜索的内容/

所以如上图所示,我们将搜索图标的超链接写为搜索地址https://qqdie.com/search/
然后用js获取这个地址A,再将图标上的超链接清空,防止没有搜索内容却直接点击图标的情况。
随后在事实获取输入框的内容B,然后将A和B拼接,就获得了最终地址C,然后将地址C添回图标的超链接地址上,这是我们点击图标就可以在预加载的条件下实现搜索内容了,代码如下:

var bb=$("#soux").attr("href");//获取搜索地址
$("#soux").attr("href",""); //清空默认地址
$('#keyword').bind('input propertychange', function () {
  var aa=$("input[name=s]").val();//获取输入框内容
$("#soux").attr("href",bb+aa); //将拼接好的地址重新添加
});

当然,这还不太完美,万一喜欢按回车呢,在监控下回车,在input上加上 onkeypress="$.getKey();",然后js代码上写上这个监控函数

$.extend({
getKey: function() {
 if(event.keyCode==13){  
$('#soux').get(0).click();
    } 
},
}

至此结束

评论也不兼容呢

然后找到了个可用的ajax评论的js,自己改了改就用上了,
然后在友人C的帮助下,修复了评论嵌套的问题,然后他又提出个问题

如果你启用了评论分页功能,由于typecho显示最新评论总是在第一页,所以当用户不在第一页发出了母评论,用户是看不到评论的,因为评论是在第一页

最后我根据上边搜索功能的原理,用了几行代码修复了这个问题,最终ajax的评论js代码如下

function ajaxc() {
var
   txt_1  = '必须填写用户名',
   txt_2  = '必须填写电子邮箱地址',
   txt_3  = '邮箱地址不合法',
   txt_4  = '必须填写评论内容';
   $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
var
   comments_order = 'DESC',
   comment_list   = '.comment-list',
   comments       = '.comment-num',
   comment_reply  = '.comment-reply',
   comment_form   = '#comment-form',
   respond        = '#comments',
   textarea       = '#textarea',
   submit_btn     = '.submit',
   new_id = '', parent_id = '';

 click_bind();

    $(comment_form).submit(function() { // 提交

        $(submit_btn).attr('disabled', true).fadeTo('slow', 0.5);

       /* 预检 */
        if ($(comment_form).find('#author')[0]) {

            if ($(comment_form).find('#author').val() == '') {
                toastr.info(txt_1);
                msg_effect('#error');
                return false;
            }

            if ($(comment_form).find('#mail').val() == '') {
                toastr.info(txt_2);
                msg_effect('#error');
                return false;
            }

            var filter = /^[^@\s<&>]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;
            if (!filter.test($(comment_form).find('#mail').val())) {
                toastr.info(txt_3);
                msg_effect('#error');
                return false;
            }
        }      
  var textValue = $(comment_form).find(textarea).val().replace(/(^\s*)|(\s*$)/g, "");  //排除空格
        if (textValue == null || textValue == "") {
            toastr.info(txt_4);
            msg_effect('#error');
console.log("内容为空");
            return false;
        }
        $(submit_btn).addClass("active");
       $('#loading').show();
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serializeArray(),
            error: function() {
                toastr.info("提交失败,请重试!");
                msg_effect('#error');
                return false;
            },
            success: function(data) { //成功取到数据
                //console.log(data);
                $(submit_btn).removeClass("active");
               $('#loading').slideUp();
                try {
                    if (!$(comment_list, data).length) {
                        toastr.info("提交失败,可能输入内容不符合规则!");
                        msg_effect('#error');
                        return false;
                    } else {
                        new_id = $(comment_list, data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function(a, b) {
                            return a - b
                        }).pop(); // TODO:找新 id,如果在第二页评论的话,找到的ID是有问题的!

                        if ($('.page-navigator .prev').length && parent_id == ""){
                            new_id = '';
var dd=$(".prev a").attr("href");//获取上页地址
$(".prev a").attr("href",""); //将地址清空
dd=dd.replace(/comment-page-(.*?)#comments/, "comment-page-1#comments");//将获取的地址页码改为1
$(".prev a").attr("href",dd); //将地址放回去
$('.prev a').get(0).click(); //点击这个超链接
                        }//判断当前评论列表是否在第一页,并且只会在母评论时候才会生效

            console.log("new id " + new_id);
                        msg_effect("#success");
                        //插入评论内容到当前页面
                        if (parent_id) {
                            data = $('#li-comment-' + new_id, data).hide(); // 取新评论
                            if ($('#' + parent_id).find(".comment-children").length <= 0) {
                                $('#' + parent_id).append("<div class='comment-children'><ol class='comment-list'></ol></div>");
                            }
                            if (new_id)//new_id不为空的时候才会插入
                                $('#' + parent_id + " .comment-children .comment-list").prepend(data);
                            console.log('该评论为子评论,parent_id:' + parent_id);
                            parent_id = '';
                            //console.log(data);
                        } else {
                            data = $('#li-comment-' + new_id, data).hide(); // 取新评论
                            //console.log('该评论为母评论');
                            if (!$(comment_list).length) //如果一条评论也没有的话
                                $(respond).append('<div class="info-com">仅有<span class="comment-num">0<\/span>条评论<\/div><ol class="comment-list"><\/ol>'); // 加 ol
                            $(comment_list).prepend(data);
                            //console.log('评论内容:');
                            //console.log(data);
                        }
                        $('#li-comment-' + new_id).fadeIn(); // 显示
                        var num;
                        $(comments).length ? (num = parseInt($(comments).text().match(/\d+/)), $(comments).html($(comments).html().replace(num, num + 1))) : 0;
                        //console.log($('#comments h4').length);
                        // 评论数加一
                        TypechoComment.cancelReply();
                        $(textarea).val('');
                        $(comment_reply + ' a, #cancel-comment-reply-link').unbind('click');
                        click_bind(); // 新评论绑定
                        $(submit_btn).attr('disabled', false).fadeTo('slow', 1);
                        if (new_id){
                            $body.animate({scrollTop: $('#li-comment-' + new_id).offset().top - 50}, 500);
                        }else{
                            $body.animate({scrollTop: $('#comments').offset().top - 50}, 500);
                        }
                    }
                } catch(e) {
                    //alert('评论ajax错误!请截图并联系主题制作者!\n\n' + e);
                    window.location.reload();
                }
            } // end success()
        }); // end ajax()
        return false;
    }); // end $(comment_form).submit()
    function click_bind() { // 绑定
        $(comment_reply + ' a').click(function() { // 回复
            //$body.animate({scrollTop: $(respond).offset().top - 180}, 400);
            //console.log($(this).parent().parent().parent().parent());
            parent_id = $(this).parent().parent().parent().parent().parent().parent().attr("id");//parent()数量根据模板而定,否则评论嵌套可能有问题
            console.log("parent_id:" + parent_id);
            $(textarea).focus();
        });
        $('#cancel-comment-reply-link').click(function() { // 取消
            parent_id = '';
        });
    }
    function msg_effect(id) { // 出错
        $(submit_btn).attr('disabled', false).fadeTo('', 1);
    }
}
ajaxc();

注:上述代码中提示功能使用了jquery通知插件toastr,如果你不想使用可将上述代码中的 toastr.info改成alert
代码参考文章:
原作者文章:http://www.iyanlei.com/typecho_ajax_comment.html
友人C文章:https://www.ihewro.com/archives/691/

注意

本文中的所有代码都依靠jquery,且本文内容预加载模式只有选择第三种方法才能实现全站无刷新。

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

pjaxinstantclickajax无刷新
最后由Jrotty编辑于2017-07-30 14:53
发表新评论
已有 43 条评论
  1. 蜜汁路易

    我最近变得越来越懒了。

  2. Sakura
    Sakura
    回复

    看到有特技于是来试试然而貌似是我触发姿势错了吗。。。。

    1. Jrotty
      Jrotty本文作者
      回复

      @Sakura 就是用instantclick实现所有站点超链接pjax ,然后评论用ajax ,这样实现站内的无刷新加载,当然这一切的意义也就是背景音乐不断,还有就是页面加载看起来顺畅

  3. hank9999
    hank9999
    回复

    我加到wp里试试。。

  4. 老黄
    老黄
    回复

    666

  5. 灰常记忆
    灰常记忆
    回复

    看着好复杂

  6. 远山
    远山
    回复

    不如直接原生JS写PJAX,能精简不少

    1. Jrotty
      Jrotty本文作者
      回复

      @远山 pJax确实挺好,但是instantclick能让人产生网页很快的错觉哈

前篇 后篇
雷姆
拉姆
音乐加载中...
0:00