menu 极光萝卜
将网站整站改为Ajax无刷新加载
folder_special 站点相关    access_time 2018-4-24   remove_red_eye 608   comment 0

今天突然产生了把网站改成无刷新加载的想法,在产生想法后立马行动上网查找资料。

先是了解到了Pjax,原本是准备直接使用Pjax,但是后来在emlog大博客看到了这篇文章:http://www.adfun.cn/div/155.html,在考虑后决定使用该文章中的方式,毕竟也是自己学习和了解原理的一个方式,相对于Pjax来说可能会有不足,但代码大小也小了很多。

经过了一个晚上的研究学习和修改,终于基本完成了整站的无刷新加载。

相对于原版,相关修改如下:

  • 调整了加载时的加载动画为适配主题的进度条
  • 移除了过程中对ajaxcontent和body的一些css和属性操作(主要是与我自己的主题冲突)
  • 加载返回的数据时改为使用append方式,原代码的innerHTML方式会出现返回的html中的script无法执行的问题

目前还发现的问题(未解决):

  • 网站侧栏中的“30天热评文章”里的链接无法无刷新加载,这是由于里面的数据是异步从Disqus获取的,在无刷新加载的js绑定a标签的点击事件执行过后才产生的新的a标签
  • Lytebox图片浮动插件失效

底下放修改后的代码:

$(function () {
    var ajaxignore_string = new String(
        '/#, .pdf, .zip, .rar, .jpg, .gif, .png, .jpeg, .bmp, /admin, /rss, .xml'); //不需要加载AJAX的后缀
    var ajaxcontent = 'main'; // 为Ajax加载部分的id,一般的主题主体都是content
    var ajaxignore = ajaxignore_string.split(', '); // 字符分割
    var ajaxloading_error_code =
        '<div class="log-list mdui-center"><div class="mdui-card mdui-hoverable"><div class="mdui-card-content">AJAX加载失败,可能是网络原因,请刷新重试!</div></div></div>'; // 加载失败HTML
    var ajaxreloadDocumentReady = false; //重新加载开关
    var ajaxtrack_analytics = false
    var ajaxscroll_top = true; // 定位返回锚点
    var ajaxisLoad = false; // ajax加载开关
    var ajaxstarted = false; // ajax开始确认
    var ajaxsearch_class = "searchform"; // 搜索表单的class,同样,一般都是类似于searchform这种的
    var ajaxsearinputid = "search"; //搜索input的id
    var ajaxsearchPath = "";
    var ajaxhome = "www.ijglb.com";
    //显示隐藏进度条
    function progressBar(show) {
        if (show) {
            $('#progressBar').removeClass('mdui-hidden');
        } else {
            $('#progressBar').addClass('mdui-hidden');
        }
    }
    //ajax加载后处理一些冲突点
    function doClear() {
        $('.mdui-tooltip').each(function () {
            $(this).remove();
        });
    }
    // 初始化载入
    $(document).ready(function () {
        ajaxloadPageInit("");
    });
    // 函数:搜索提交
    function submitSearch(param) {
        if (!ajaxisLoad) {
            ajaxloadPage(ajaxsearchPath, 0, param);
        }
    }
    // 函数:过滤链接
    function ajaxcheck_ignore(url) {
        for (var i in ajaxignore) {
            if (url.indexOf(ajaxignore[i]) >= 0) {
                return false;
            }
        }
        return true;
    }
    // 建立锚点函数,用于跳转后的滚动定位,使用这个主要是有侧栏评论带#号时能在请求后定位到该条评论的位置
    function body_am(id) {
        id = $('#' + id).offset().top + 200;
        $("body,html").animate({
            scrollTop: id
        }, 800);
        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);
    }
    // 函数:需要重新加载的js,比如灯箱、代码高亮等
    function ajaxreload_code() {
        //这里是代码重载区。比如灯箱阿。代码高亮啊什么什么的。
    }
    // 函数:导航菜单高亮切换
    function ajaxclick_code(thiss) {
        //这里根据自己网站的情况调整
        $('#tab a').each(function () {
            $(this).removeClass('mdui-tab-active');
        });
        $(thiss).addClass('mdui-tab-active');
    }
    // 核心函数:ajax加载
    function ajaxloadPage(url, push, getData) {
        if (!ajaxisLoad) {
            if (ajaxscroll_top == true) { // 返回顶部
                $('html,body').animate({
                    scrollTop: 0
                }, 500); // 返回位置和速度
            }
            ajaxisLoad = true; // 开启
            ajaxstarted = true; // 开始
            nohttp = url.replace("http://", "").replace("https://", ""); // 去除https或http
            firstsla = nohttp.indexOf("/"); // 是否存在 / 符号
            pathpos = url.indexOf(nohttp); // 是否存在完整链接
            path = url.substring(pathpos + firstsla); // 切割提取字符串
            if (push != 1) {
                if (typeof window.history.pushState == "function") { // 浏览器地址变更
                    var stateObj = {
                        foo: 1000 + Math.random() * 1001
                    };
                    history.pushState(stateObj, "页面加载中...", path);
                } else {}
            }
            if (!$('#' + ajaxcontent)) {
                alert("网站没有id为" + ajaxcontent + "的对象,ajax异常!");
            }
            progressBar(true); //开始加载显示进度条
            $.ajax({
                type: "GET",
                url: url,
                //设为false时,ajax分页链接会出现错误
                data: getData,
                cache: true,
                dataType: "html",
                success: function (data) { // 加载成功后
                    ajaxisLoad = false; // 关闭ajax
                    datax = data.split('<title>');
                    titlesx = data.split('</title>');
                    if (datax.length == 2 || titlesx.length == 2) { // 浏览器标题变更
                        data = data.split('<title>')[1];
                        titles = data.split('</title>')[0];
                        $(document).attr('title', ($("<div/>").html(titles).text()));
                    } else {

                    }
                    if (ajaxtrack_analytics == true) {
                        if (typeof _gaq != "undefined") {
                            if (typeof getData == "undefined") {
                                getData = "";
                            } else {
                                getData = "?" + getData;
                            }
                            _gaq.push(['_trackPageview', path + getData]);
                        }
                    }
                    data = data.split('id="' + ajaxcontent + '"')[1];
                    data = data.substring(data.indexOf('>') + 1);
                    var depth = 1;
                    var output = '';
                    while (depth > 0) {
                        temp = data.split('</div>')[0];
                        i = 0;
                        pos = temp.indexOf("<div");
                        while (pos != -1) {
                            i++;
                            pos = temp.indexOf("<div", pos + 1);
                        }
                        depth = depth + i - 1;
                        output = output + data.split('</div>')[0] + '</div>'; //分割字符串
                        data = data.substring(data.indexOf('</div>') + 6);
                    }
                    $('#' + ajaxcontent).empty();
                    $('#' + ajaxcontent).append(output);
                    doClear();
                    ajaxloadPageInit("#" + ajaxcontent + " ");

                    if (ajaxreloadDocumentReady == true) {
                        $(document).trigger("ready");
                    }
                    try {
                        ajaxreload_code();
                        to_am(url);
                    } catch (err) {}
                    progressBar(false); //加载结束隐藏进度条
                },
                error: function (jqXHR, textStatus, errorThrown) { // 加载错误时提示
                    ajaxisLoad = false;
                    document.title = "Error loading requested page!";
                    document.getElementById(ajaxcontent).innerHTML = ajaxloading_error_code;
                    doClear();
                    progressBar(false);
                }
            });
        }
    }
    // 后退时页面效果,用popstate
    window.onpopstate = function (event) {
        if (ajaxstarted === true && ajaxcheck_ignore(document.location.toString()) == true) {
            ajaxloadPage(document.location.toString(), 1);
        }
    };
    //函数: ajax加载
    function ajaxloadPageInit(scope) {
        $(scope + "a").click(function (event) { // 点击事件绑定a标签
            if (this.href.indexOf(ajaxhome) >= 0 && ajaxcheck_ignore(this.href) == true) {
                event.preventDefault();
                this.blur();
                var caption = this.title || this.name || "";
                var group = this.rel || false;
                try {
                    ajaxclick_code(this);
                } catch (err) {}
                ajaxloadPage(this.href); // 核心函数
            }
        });
        $('.' + ajaxsearch_class).each(function (index) { // 搜索ajax
            if ($(this).attr("action")) {
                $("#" + ajaxsearinputid + "").change(function () {
                    ajaxsearchPath = "index.php?keyword=" + $("#" + ajaxsearinputid).val() + "";
                });
                $(this).submit(function () {
                    submitSearch($(this).serialize());
                    return false;
                });
            }
        });
    }
});


local_offer JavaScript emlog Ajax
赞助商链接:

发表评论:

account_circle
昵称不能为空
email
邮箱格式错误
link
网站格式错误
textsms