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
});
}
});
我们始终相信,完美的也是脆弱的,不要一味的追求完美却忘了最初的目标。
FastAdmin 无刷新地址改变的更多相关文章
- JSF中使用f:ajax标签无刷新页面改变数据
ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的fa ...
- history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
示例: http://browserstate.github.io/history.js/demo/ 简介 HTML4有一些对浏览历史的前进后退API的支持如: window.hist ...
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- 使用ajax和history.pushState无刷新改变页面URL
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- 通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- 使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
- 使用ajax和history.pushState无刷新改变页面URL(转)
表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
- history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 第八天 RHEL7.2 文件权限管理(第一部分)
一.文件的基本权限 文件有三种访问方式限制访问权限 第一种:文件所有者的访问权限 第二种:文件所有者同组的访问权限 第三种:其他人访问权限 当使用ls -l 或ll命令时,可查看此三种权限 在权限描述 ...
- angularJS---service
service ng的服务是这样定义的: Angular services are singletons objects or functions that carry out specific ta ...
- 从userAgent判断浏览器是什么(chorme ie 火狐)浏览器类型检测、浏览器检测
一.正确的方法: 通过navigator对象的userAgent属性来判断, 主要是判断userAgent 的信息里是否含有以下字段信息: js代码(非完整版) /************ navig ...
- ping命令知识 Ping命令工作原理详解
在网络应用中,ping网速与IP地址等都是非常常用的命令,但大家知道ping命令的工作原理吗?要知道这其中的奥秘,我们有必要来看看Ping命令的工作过程到底是怎么样的.下面介绍下ping命令的详细知识 ...
- (转) MapReduce Design Patterns(chapter 2 (part 1))(二)
CHAPTER 2 .Summarization Patterns 随着每天都有更多的数据加载进系统,数据量变得很庞大.这一章专注于对你的数据顶层的,概括性意见的设计模式,从而使你能扩展思路,但可能 ...
- SpringMVC札集(08)——文件上传
自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onL ...
- Win10 64位系统ADO方式操作数据库失败解决方法
VC操作Access数据库一般通过ODBC.ADO.DAO等方式,但在我的Win10 64位操作系统中,通过ADO方式操作数据库会失败,无法读取数据.解决方法:1.首先确保Win10操作系统ado目录 ...
- FFmpeg再学习 -- SDL 环境搭建和视频显示
继续看雷霄骅的 课程资料 - 基于FFmpeg+SDL的视频播放器的制作 一.SDL 简介 参看:WIKI -- Simple DirectMedia Layer 参看:最简单的视音频播放示例9:SD ...
- [Linux] 随机切分文件内容
1.从原文件中随机选出若干行 可以直接用shuf命令就可以完成: $ shuf -n source.txt > target.txt shuf命令的说明: $ shuf --help Usage ...
- 【剑指offer】数字在排序数组中出现的次数,C++实现
原创博文,转载请注明出处! # 题目 # 思路 利用二分查找法,查找元素k在排序数组中第一次出现的位置m及最后一次出现的位置n,m-n+1即为元素k再排序数组中出现的次数. 二分查找法在数 ...