QQ爹博客 QQ爹博客

instantclick实现的全站无刷新

in 代码相关 文章转载请注明来源!

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的使用方法,建议去官网查阅

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

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

搜索功能.jpg

因为搜索结果地址一般为是站点地址加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,且本文内容预加载模式只有选择第三种方法才能实现全站无刷新。

相关文章已经有了更新《续 instantclick 实现的全站无刷新》

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

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

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://qqdie.com/archives/instantclick-without-refresh.html (转载时请注明本文出处及文章链接)

pjaxinstantclickajax无刷新
发表新评论
已有 70 条评论
  1. JIElive
    JIElive O欧朋浏览器
    回复

    dalao你好,我用了你的这个ajax评论,但是嵌套有一些问题,具体表现为:完全刷新页面后的第一次评论不能正常嵌套,这是不要刷新,继续评论,发现之后的评论就可以正常嵌套了,不知道是什么原因,希望dalao有时间了去我的小站查看源码帮忙找找问题所在

    1. JIElive
      JIElive O欧朋浏览器
      回复

      @JIElive 有错别字,再简单说一下吧,就是刷新后的第一次评论不能正常嵌套,第一次评论后不要刷新,再次的评论就正常嵌套了。
      还有个问题,你的网站评论怎么不能粘贴的,全部拿手机手打的

      1. JIElive
        JIElive 10Chrome 68
        回复

        @JIElive 解决了,开头少了个click_bind()的调用

  2. 云武
    云武 10Chrome 64
    回复

    提示 toastr.info(txt_4); 错误,这个是什么原因?

    1. Jrotty
      Jrotty本文作者 10Chrome 63
      回复

      @云武 必须填写评论内容!

      1. 云武
        云武 10Chrome 64
        回复

        @Jrotty 不是没有填写,而是提交以后的报错信息,现在把 js 顺序调换一下解决了

  3. 后宫学长
    后宫学长 10Chrome 62
    回复

    以前我猛找有AJAX评论的主题,现在你们都加了,很好你呢。

  4. 狂放
    狂放 10Chrome 61
    回复

    也就是说把搜索按钮改成A?这个好大佬啊 萌新写破主题ing

  5. 折影轻梦
    折影轻梦 10Chrome 61
    回复

    感觉这个滑稽怪怪的

    1. Jrotty
      Jrotty本文作者 10Chrome 61
      回复

      @折影轻梦 不稽一格

  6. 折影轻梦
    折影轻梦 10Chrome 61
    回复

前篇 后篇
雷姆
拉姆