$(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. 用jquery校验radio单选按钮(原创)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  2. POJ 3468_A Simple Problem with Integers(树状数组)

    完全不知道该怎么用,看书稍微懂了点. 题意: 给定序列及操作,求区间和. 分析: 树状数组可以高效的求出连续一段元素之和或更新单个元素的值.但是无法高效的给某一个区间的所有元素同时加个值. 不能直接用 ...

  3. 纤程(FIBER)

    Indy 10 还包含对纤程的支持.纤程是什么?简单来说,它也是 一个“线程”,但是它是由代码控制的,而不是由操作系统控制的.实际上,可以认为线程 是一个高级纤程.纤程和 Unix 用户线程(Unix ...

  4. ORA-00942:表或视图不存在 低级错误一例

    ORA-00942:表或视图不存在  低级错误一例 运行查询语句,报ORA-00942错误 检查后发现没有指定表的所属用户.加入用户.再次查询,查询正常,截图例如以下: *************** ...

  5. python开发【第4篇】【进程、线程、协程】

    一.进程与线程概述: 进程,是并发执行的程序在执行过程中分配和管理资源的基本单位,每一个进程都有一个自己的地址空 间. 线程,是进程的一部分,一个没有线程的进程可以被看作是单线程的.线程有时又被称为轻 ...

  6. firstChild.nodeValue

    var ia=document.getElementsByTagName("em");var t=600; for(var ii=0;ii<t;ii++){var it=ia ...

  7. 在js中取选中的radio值

    在js中取选中的radio值 <input type="radio" name="address" value="0" /> & ...

  8. hdu 4990 Reading comprehension(等比数列法)

    题目链接:pid=4990" style="color:rgb(255,153,0); text-decoration:none; font-family:Arial; line- ...

  9. flash builder 4.6 下载完成后安装不成功

    从网上下载了一下flash builder 4.6 下载完成后安装不成功,说是有一个安装被挂起,不成安装成功结果从注册表中删除了pendingobject,还是不行,没有办法,从网上搜了一下,发现了大 ...

  10. SYSUCPC2017 DAG最多能添加多少边?

    校赛的一道题目 难度不大 不过还是挺有趣的 题意:给定一个有向图,问此图是不是一个DAG且不包含重边 如果是的话 回答最多可以添加多少条边且图仍然是个DAG 考虑对于任意一个点u 添加一条边(u,v) ...