最简单的SPA(单页应用)实现
$(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(单页应用)实现的更多相关文章
- 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...
- Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
- 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用
Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 基于VUE的SPA单页应用开发-加载性能篇
1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...
- 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 前端学习之路之SPA(单页应用)设计原理
SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...
- SPA单页应用前后分离微信授权
项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...
- 3.【nuxt起步】-下面以一个SPA单页程序为例子
spa:single page applcation 1.components目录新建header.vue,footer.vue Header.vue Footer.vue Pages/index.v ...
随机推荐
- [bzoj1717][Usaco2006 Dec]Milk Patterns 产奶的模式_后缀数组_二分答案
Milk Patterns 产奶的模式 bzoj-1717 Usaco-2006 Dec 题目大意:给定一个字符串,求最长的至少出现了$k$次的子串长度. 注释:$1\le n\le 2\cdot 1 ...
- Ubuntu 16.04下减小/释放/清理VirtualBox虚拟硬盘文件的大小
一般在VirtualBox中安装Windows,然后用无缝模式进行某些特定软件的使用. 而VirtualBox的虚拟硬盘会越用越大,并且VirtualBox没有自带清理工具,相比VMware来说,VM ...
- android_handler(二)
这篇记录 android 消息机制中.WorkThread 模拟向网络訪问数据,获得数据后,返回 message 发送给 MainThread ,并改动 TextView 的 text 的这种一个步骤 ...
- STL中常用的c++语法
函数调用操作(c++语法中的左右小括号)可以被重载,STL的特殊版本都以仿函数形式呈现.如果对某个class进行operator()重载,它就成为一个仿函数. 仿函数(functor),就是使一个类的 ...
- 【转】C++ 进程间的通讯(一):简单的有名管道实现
原文: C++ 进程间的通讯(一):简单的有名管道实现 -------------------------------------------------- 进程间的通讯(一):简单的有名管道实现 ...
- hadoop 文件操作
Create a directory in HDFS - mkdir The hadoop mkdir command is for creating directories in the hdfs. ...
- [Javascript] Flattening nested arrays: a little exercise in functional refactoring
In this lesson we write an imperative function to flatten nested arrays, and then use the popular ma ...
- DSPC6748中某问题的解决方式
因为之前没有做过DSP相关的开发,属于菜鸟中的菜鸟.出现故障后.不知道从哪方面来解决这些小问题. 开发环境:CCS5.5.0 开发板:TI公司的TMS320C6748 问题: 控制台出现初始化结束后多 ...
- 【HNOI模拟By lyp】Day1
1 xlk1.1 题目描述 给定一棵大小为 n 的无根树,求满足以下条件的四元组 (a, b, c, d) 的个数: 1. 1 ≤ a < b ≤ n 2. 1 ≤ c < d ≤ n 3 ...
- MySQL InnoDB 快速导入数据
今天把需要分析的数据导入到数据库中. 数据将近7000万条,在txt文件中存放,共5.75G.采用Load data infile 导入,最后花了18个小时导入.主要做了以下修改: 1. MySQL优 ...