$(function(){
var replacePage = function(href, onFinish){
$.get(href,{},function(raw){
var data = raw.substring(raw.indexOf('</head>')+7,raw.indexOf('</body>')+7);
$('body').html(data);
if(onFinish!=undefined)onFinish();
});
};
$("body").click(function(){
var $target = $(event.target);
var href = $target.attr('href');
if(href=="")return; event.preventDefault();
console.log('SPA push',href);
replacePage(href, function(){
history.pushState(null,null,href);
});
});
window.addEventListener('popstate',function(event){
console.log('SPA pop');
replacePage(window.location.href);
});
});

最简单的SPA(单页应用)实现的更多相关文章

  1. 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)

    前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...

  2. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  3. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  4. 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

    Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...

  5. 大熊君学习html5系列之------History API(SPA单页应用的必备)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  6. 基于VUE的SPA单页应用开发-加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  7. 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  8. 前端学习之路之SPA(单页应用)设计原理

    SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...

  9. SPA单页应用前后分离微信授权

    项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...

  10. 3.【nuxt起步】-下面以一个SPA单页程序为例子

    spa:single page applcation 1.components目录新建header.vue,footer.vue Header.vue Footer.vue Pages/index.v ...

随机推荐

  1. Python基础之 一列表

    列表模块:listlen(list):列表元素个数max(list):列表元素最大值min(list):列表元素最小值list(seq):将元组转为列表list.append(obj):列表末尾添加新 ...

  2. Mayor's posters POJ - 2528

    The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campaign h ...

  3. Ubuntu 16.04安装GTX960闭源驱动

    GTX960的闭源要Nvidia 346版才行,闭源驱动能很大提升显卡的性能,例如双显示输出等,缺点是不开源. 有以下方式来安装: 1.命令行: sudo add-apt-repository -y ...

  4. MongoDB小结20 - find【查询条件$size】

    size可以获得指定数组长度的文档 db.user.find({"fruit":{"$size":3}},{"_id":0}) { &quo ...

  5. [React] Prevent Unnecessary Rerenders of Compound Components using React Context

    Due to the way that React Context Providers work, our current implementation re-renders all our comp ...

  6. HDU - 3584 Cube (三维树状数组 + 区间改动 + 单点求值)

    HDU - 3584 Cube Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Subm ...

  7. Js、Jquery对goTop功能的实现

    本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能,以及在这个过程中碰到的问题. 终于实现的效果类似:http://sc2.163.com/home(注意右下角的top) 代码: ...

  8. Myeclipse的优化方法

    近期在实习,公司给分配了新的电脑,可是不知道怎么弄得,总是弄得非常卡,没办法仅仅有自己好好整理一下电脑了,另外.为了提高编程的效率.顺便也把Myeclipse也优化了一下. 第一步: 取消自己主动va ...

  9. linux 打包 压缩

    序 1.gzip 2.bzip2 3.tar 序 压缩优点      1.节省空间   2.节省带宽 解决脉络 如今有各种压缩文件形式,原因何在?主要是压缩技术更新换代,压缩方法不全然同样.不同的后缀 ...

  10. leetcode第一刷_Best Time to Buy and Sell Stock

    这样的题就不要去考虑N^2的算法了.肯定会超时的.乍一看,非常可能会想到贪心,可是普通的贪心思路是不行的,比方想找到一个最小值用来买入.尽管它跟最大值之间的差一定是最好的,可是最大值出如今它前面就不行 ...