bg
签名 云与原
文章 工具 随笔
default
qq github ms
设置
top
无刷新加载
2020-03-05 20:28:51 168 0

了解


以前我是压根不知无刷新加载这技术的,才疏学浅啊。

偶然逛到某大佬的博客,发觉跳转界面很不错,细探才了解到pjax。即pushState+Ajax,顾名思义:ajax请求,pushState展示,原理不必多言。

学习


作为技术控,看到新东西当然是动手去折腾一下啦stk-img。下载jquery.pjax文件,代码写起来!

接口貌似很简单。如下

劈里啪啦几十行代码敲出了demo,确实可以使用,点击绑定的<a>标签后,pjax会先ajax请求html,再用html替换掉container的内容。

但是,不自己写一个pjax怎么能叫搞懂了呢stk-img

开发


随即写了一个博客定制的ajax请求并替换的函数,位置在share.js,代码如下:

function ajax_url(u, callback) {
    show_loading();
    $.ajax({
        success: function (r) {
            let html = document.createElement('html');
            html.innerHTML = r;
            // title
            document.title = html.querySelector('head title').innerText;
            // keyword
            document.querySelector('head meta[name="description"]').content = html.querySelector('head meta[name="description"]').content;
            // bg
            let b = $('#body-bg-img');
            b.attr('src', b.attr('src').replace(/\d(\.jpg)$/, html.querySelector('bg').innerText+'$1'));
            // content
            $('#show-wrap').html(html.querySelector('#show-wrap').innerHTML);
            // css
            document.querySelectorAll('head link[rel="stylesheet"]').forEach(function (e) {
                if (ignore_head.indexOf(e.href.replace(/.*\/(.*?\.css)/, '$1')) === -1){
                    e.remove();
                }
            });
            html.querySelectorAll('head link[rel="stylesheet"]').forEach(function (e) {
                let s = document.createElement('link');
                s.rel = 'stylesheet';
                s.href = e.href;
                s.onload = function(){
                };
                document.head.append(s);
            });
            // script
            document.querySelectorAll('head script').forEach(function (e) {
                if (ignore_head.indexOf(e.src.replace(/.*\/(.*?\.js)/, '$1')) === -1){
                    e.remove();
                }
            });
            // js同步加载防止错位
            download_js();
            function download_js(){
                let e = html.querySelector('head script');
                if (typeof e !== 'undefined' && e !== null) {
                    let s = document.createElement('script');
                    s.src = e.src;
                    e.remove();
                    document.head.append(s);
                    if (e.getAttribute('onerror') !== null){
                        s.onerror = function () {
                            exchange(s, e.getAttribute('onerror').replace(/^.*?(\/.*\.js).*/, '$1'), download_js);
                        }
                    }
                    s.onload = download_js;
                }else{
                    if (typeof callback !== 'undefined') callback();
                }
            }
        },
        beforeSend: function (xhr) {
            xhr.setRequestHeader('x-single', 't');
        },
        url: u, type: 'GET', timeoutSeconds: 10
    });
}

服务器收到x-single头就不返回累赘的东西。
其中有段递归回调代码是专门让js下载同步进行,防止引用错位。副作用是让网页加载稍微变慢了亿点stk-img,暂时没更好的解决办法。

完毕

更新时间: 2020-03-09 22:28:32
登录后评论

评论列表

1