H5中的history单页面，手动实现单页面开发，细说h5单页面原理

就目前来看，前端的单页面开发占了很大一部分，一方面无刷新的切换增强了体验，并且浏览器记录依然存在，前进后退都没问题，在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用，但是#的形式总是令人不爽，幸好h5新增了history.pushState与history.replaceState。

1.介绍API

history.pushState(data, title [, url])：

往历史记录堆栈顶部添加一条记录； data会在onpopstate事件触发时作为参数传递过去，title为页面标题，当前所有浏览器都会忽略此参数（我们在自己实现的时候可以随便填写），url为页面地址，就是如果history.pushState({name:'home'},'home page' ,'home')则地址栏就成了/home，更神奇的是此时不会向后端发送请求，仅仅是url改变。

history.replaceState(data, title [, url]) ：

更改当前的历史记录，参数跟history.pushState(data, title [, url])一致，只不过不会像浏览器历史栈添加数据，而是替代之前的历史记录；

history.state：用于存储以上方法的data数据，

window.onpopstate：响应pushState或replaceState的调用；

2.介绍实现单页面原理

通过以上几个方法我们完全可以改变url并且监听到url的变化，比如url由localhost:8000改变成localhost:8000/home，此时我们通过onpopstate监听到了这个变化，并且拿到data数据，假设拿到了name，此时假设有以下对应路由表，其实可以随便定义,

let route = {home:{name:'home',url:'./home.html',des:'home page'},class:{name:'class',url:'./class.html',des:'class page'}
}

那我们就知道此时home对应应该是./home.html，于是我们利用ajax将./home.html加载过来，此时我们拿到了home.html的所有信息，于是跟vue或者其他框架一样挂载到当前页面的一个元素上。

注意点：

我们主动利用history.pushState({name:'home'},'home page' ,'home')时候并不会触发onpopstate，就是说此时是无法知道url变动了，为了让页面顺利跳转又触发我们提供的ajax，那么我们就要修改一下history.pushState

var pushState = history.pushState;   // 存储原生 replaceState
history.pushState = function(state, param) {     // 改写 replaceStatevar urlName = arguments[2];var url = route[urlName].url;ajax(url)return pushState.apply(history, arguments);    // 调用原生的 replaceState};

如上，我们不仅在使用 history.pushState时候，触发我们自己定义的ajax函数，加载了页面，又调用了原生的方法，是不会影响原生历史记录和跳转等问题。

现在我们知道我们每次调用history.pushState都会触发ajax函数

<div id="app"></div><script>function ajax(url){//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端ajax.open('get',url);//步骤三:发送请求ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用ajax.onreadystatechange = function () {if (ajax.readyState==4 &&ajax.status==200) {//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的//输入相应的内容document.querySelector('#app').innerHTML = ajax.responseText}}}<script>

利用这个ajax就可以将别的页面的内容加载到本页面的#app这个元素上，实现了单页面跳转。

3.需要注意的地方和坑：

1.在尝试该方法前，需要其启动服务器代理html文件，即静态的html文件打开会报错

2.我们在通过history.pushState改变url浏览器并不会跟处理普通url一样新发送请求，但是我们在刷新的时候浏览器还是会发送请求，即localhost:8000/home刷新浏览器就会请求这个接口，就会导致后台根本没有这个路由返回404，（这也是vue-route经常会出现刷新404问题的原因）解决办法就是遇到404的都代理给index.html，我测试使用express来起服务的，有一个插件叫 connect-history-api-fallback，使用之后就不会出现这个问题。

H5中的history单页面，手动实现单页面开发，细说h5单页面原理相关推荐

h5 移动开发 html页面跳转,iosh5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
php怎样查看视频播放的进度条,H5中视频与音频标签和进度条如何使用
这次给大家带来H5中视频与音频标签和进度条如何使用,H5中视频与音频标签和进度条使用的注意事项有哪些,下面就是实战案例,一起来看一下. 最近项目中使用Html5的video和audio标签来在线播放视 ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
免单拼团商城小程序开发
免单拼团商城小程序开发概述// 免单活动是现在商家比较喜欢的一种营销活动,几乎所有的商家都是通过免单系统进行免单的,市面上大部分的免单系统都是只有排队免单的功能,免单周期较长且比较单一,但是我们免单 ...
使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...
陪玩系统源码开发，H5页面中调用支付功能的实现
最近在陪玩系统源码开发工作中,有个H5页面需要实现微信支付和支付宝支付的功能,现在已经完成,抽个时间写出来,分享给有需要的人. 第一步:先判断当前环境判断陪玩系统源码中用户所属环境,根据环境不同,执 ...
html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...
我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...
html5 pushstate用法,h5中history.pushState的用法
h5中提供了不修改页面内容只修改地址栏的api,pushState(添加浏览历史),replaceState(修改当前浏览历史),popState事件在用户返回或前进进会被出发触发 history.p ...
H5中的页面存储技术
H5中的页面存储技术 1 会话跟踪技术 2 localStorage与sessionStorage 2.1 概述 2.2 localStorage的优势与局限: 2.3 使用方法 1 会话跟踪技术 h ...

H5中的history单页面，手动实现单页面开发，细说h5单页面原理

H5中的history单页面，手动实现单页面开发，细说h5单页面原理相关推荐

最新文章

热门文章