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

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

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

因为搜索结果地址一般为是站点地址加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

支付宝打赏

文章二维码

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

版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
文章链接:https://qqdie.com/archives/instantclick-without-refresh.html (转载时请注明本文出处及文章链接)

pjaxinstantclickajax无刷新
发表新评论
已有 64 条评论
  1. 后宫学长
    后宫学长Windows 10谷歌浏览器
    回复

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

  2. 狂放
    狂放Windows 10谷歌浏览器
    回复

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

  3. 折影轻梦
    折影轻梦Windows 10谷歌浏览器
    回复

    感觉这个滑稽怪怪的

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器
      回复

      @折影轻梦 不稽一格

  4. 折影轻梦
    折影轻梦Windows 10谷歌浏览器
    回复

  5. 尚寂新
    尚寂新Windows 7谷歌浏览器
    回复

    //parent()数量根据模板而定,否则评论嵌套可能有问题 具体指的是模版中的哪个部分 找了半天都没找到

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器
      回复

      @尚寂新 //console.log($(this).parent().parent().parent().parent());上边这个注释删掉后可进行调试,感觉你可能用5个就行吧

  6. 尚寂新
    尚寂新Windows 7谷歌浏览器
    回复

    哈哈 搜索这块我又改了改 https://jimoe.cn/archives/search-instantclick.html

    1. Jrotty
      Jrotty本文作者Android OUC浏览器
      回复

      @尚寂新 文章里遗漏的小括号补上了,这回没毛病了233

PREVIOUS NEXT
雷姆
拉姆
音乐加载中...
0:00