zoukankan      html  css  js  c++  java
  • FastAdmin 无刷新地址改变

    FastAdmin 无刷新地址改变

    群里有人问 FastAdmin 是不是用了 pjax?

    之前有看到 Karson 回复过,其实 FastAdmin 用的是 HTML5 的一个History API pushState

    那代码在哪里呢?
    require-backend.min.js

            if (history.pushState) {
                //浏览器前进后退事件
                $(window).on("popstate", function (e) {
                    var state = e.originalEvent.state;
                    if (state) {
                        $("a[addtabs=" + state.id + "]", options.monitor).data("pushstate", true).trigger("click");
                    }
                });
            }
            $(options.monitor).on('click', '[addtabs]', function (e) {
                if ($(this).attr('url').indexOf("javascript:") !== 0) {
                    if ($(this).is("a")) {
                        e.preventDefault();
                    }
                    var id = $(this).attr('addtabs');
                    var title = $(this).attr('title') ? $(this).attr('title') : $.trim($(this).text());
                    var url = $(this).attr('url');
                    var content = options.content ? options.content : $(this).attr('content');
                    var ajax = $(this).attr('ajax') === '1' || $(this).attr('ajax') === 'true';
                    var state = ({
                        url: url, title: title, id: id, content: content, ajax: ajax
                    });
    
                    document.title = title;
                    if (history.pushState && !$(this).data("pushstate")) {
                        var pushurl = url.indexOf("ref=addtabs") === -1 ? (url + (url.indexOf("?") > -1 ? "&" : "?") + "ref=addtabs") : url;
                        try {
                            window.history.pushState(state, title, pushurl);
                        } catch (e) {
    
                        }
                    }
                    $(this).data("pushstate", null);
                    _add.call(this, {
                        id: id,
                        title: $(this).attr('title') ? $(this).attr('title') : $(this).html(),
                        content: content,
                        url: url,
                        ajax: ajax
                    });
                }
            });
    

    我们始终相信,完美的也是脆弱的,不要一味的追求完美却忘了最初的目标。

  • 相关阅读:
    XX宝面试题——css部分
    XX宝面试题——JS部分
    Struts、JSTL标签库的基本使用方法
    JavaScript:学习笔记(10)——XMLHttpRequest对象
    SpringBoot学习笔记:单元测试
    SpringMVC:学习笔记(11)——依赖注入与@Autowired
    SpringBoot学习笔记:动态数据源切换
    Django:学习笔记(9)——视图
    Django RF:学习笔记(8)——快速开始
    CNN学习笔记:批标准化
  • 原文地址:https://www.cnblogs.com/F4NNIU/p/9753032.html
Copyright © 2011-2022 走看看