$(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. cogs——21. [HAOI2005] 希望小学

    21. [HAOI2005] 希望小学 ★★   输入文件:hopeschool.in   输出文件:hopeschool.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述 ...

  2. codevs——1019 集合论与图论

    1019 集合论与图论  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 集合论与图论对于小松来说 ...

  3. 洛谷 P1708 天然气井

    P1708 天然气井 题目描述 Mary试图控制成都的天然气市场.专家已经标示出了最好的天然气井和中转站在成都的地图.现在需要将中转站和天然气井连接起来.每个中转站必须被连接到正好一个钻油井,反之亦然 ...

  4. POJ3977 Subset 折半枚举

    题目大意是给定N个数的集合,从这个集合中找到一个非空子集,使得该子集元素和的绝对值最小.假设有多个答案,输出元素个数最少的那个. N最多为35,假设直接枚举显然是不行的. 可是假设我们将这些数分成两半 ...

  5. Android插屏动画效果

    公司研发SDK,须要类似有米插屏的动画效果,研究了下,写了一个DEMO,凝视非常具体了. <span style="font-size:24px;">package c ...

  6. OpenLayers 3+Geoserver+PostGIS实现点击查询

    WebGIS开发中,点击查询是最经常使用的一种查询方式,在ArcGIS api 中.这样的查询叫IdentifyTask,主要作用是前台提交參数.交ArcServer查询分析返回. 本文从开源框架的角 ...

  7. 01排序的Java实现

    比赛描写叙述: 的个数同样时再按ASCII码值排序. 输入: 个字符. 输出: 串的顺序.使得串按基本描写叙述的方式排序. 例子输入: 例子输出: 被AC的代码例如以下: import java.ut ...

  8. (转)C3P0配置

    C3P0是一个开源的JDBC 连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展.目前使用它的开源项目有Hibernate,Spring等. sourceforge 下载: ...

  9. LR(逻辑回归)

    逻辑回归(Logistic regression): 想要理解LR,只需要记住: Sigmoid 函数: y=1/(1+e-z) 线性回归模型: y=wTx+b 最后: y= 1/(1+e-(wTx+ ...

  10. 34.无废话ExtJs 入门教程十八[树:TreePanel]

    转自:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/28/2566350.html 1. <!DOCTYPE html PUBLIC ...