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 ...
随机推荐
- 搞懂分布式技术2:分布式一致性协议与Paxos,Raft算法
搞懂分布式技术2:分布式一致性协议与Paxos,Raft算法 2PC 由于BASE理论需要在一致性和可用性方面做出权衡,因此涌现了很多关于一致性的算法和协议.其中比较著名的有二阶提交协议(2 Phas ...
- 二十九 Python分布式爬虫打造搜索引擎Scrapy精讲—selenium模块是一个python操作浏览器软件的一个模块,可以实现js动态网页请求
selenium模块 selenium模块为第三方模块需要安装,selenium模块是一个操作各种浏览器对应软件的api接口模块 selenium模块是一个操作各种浏览器对应软件的api接口模块,所以 ...
- nyoj1007——欧拉求和
GCD 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 The greatest common divisor GCD(a,b) of two positive in ...
- Spring3.0 核心jar包详解
org.springframework.aop 包含在应用中使用Spring的AOP特性时所需的类. org.springframework.asm Spring独立的ASM程序, Spring ...
- Qt5全局热键-QxtGlobalShortcut
最近做一个项目需要注册全局热键,在网上搜索发现有个第三方库 libqxt 中给出一个比较好的跨平台的解决方案,就是 QxtGlobalShortcut. 但是编译过程中发现这个库用到的QAbstrac ...
- 进程上下文频繁切换导致load average过高
一.问题现象 现网有两台虚拟机主机95%的cpu处于idle状态,内存使用率也不是特别高,而主机的load average达到了40多. 二.问题分析 先在主机上通过top.free.ps.iosta ...
- Linux 磁盘管理,Linux vi/vim
一.Linux 磁盘管理 Linux磁盘管理好坏直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 ...
- Friendly Date Ranges
让日期区间更友好! 把常见的日期格式如:YYYY-MM-DD 转换成一种更易读的格式. 易读格式应该是用月份名称代替月份数字,用序数词代替数字来表示天 (1st 代替 1). 记住不要显示那些可以被推 ...
- css3之calc()
初识calc() 在使用calc()之前,我也只是听说有这么一个东西,但在用过之后我才发现这个功能其实很实用. calc()其实就是英文calculate(计算)的缩写,它看起来像个函数吧? 其实不是 ...
- [C#]委托实例分析(附源码)
一直都听说C#中的委托与事件非常重要,都没有什么切身的体会,而这次通过做一个WinForm二次开发的项目才真正感觉到了委托与事件的犀利之处. 1.C#中的事件和委托的作用? 事件代表一个组件能够被关注 ...