踩过许多坑后，送你这份H5交互的页面跳转方式总结

年做了大量的 HTML5 项目，遇到了很多坑。在这个过程中学到了一些之前不具备的知识，所以这篇文章就简单分享一下这方面的话题。

传统的MPA

首先，说一个比较古老的东西，叫做 MPA。

MPA 的全称是 Multi-page Application，意思是整个应用（站点）由多个完整的 html 构成。用户在页面 1 点击跳转，需要向服务端请求页面 2，请求成功后渲染。而用户返回时，相当于是点击了浏览器的返回，页面退回到之前的历史记录，并重新加载出来。

在这样的模式下，页面间切换慢、不流畅的问题比较突出，尤其是在移动端。

同时，它还产生了几个小问题：

跳转动画：页面间的跳转无法实现转场动画效果。
如果前一个页比较长，用户滑动到页面比较靠下方的位置后点击，返回时，页面无法默认停留在原位置。
iOS 右滑返回产生问题，从页面 1 跳转到页面 2，再从页面 2 跳转到页面 3，右滑返回，会直接回到页面 1 前的页。

SPA

随着对移动端体验需求的提高以及技术的进步，另一种模式 SPA（Single-page Application）逐渐成为主流。

SPA 简单来说，就是原来在 MPA 中的多个 html，现在被放在了一个 html 中，并被分成若干个片段。跳转、返回的本质变成了分段的「隐藏」与「显示」。跳转不需要反复对服务端进行请求，从而使得页面与页面之间切换更加快速流畅。

在这样的机制下，跳转与返回完全由代码控制，所以可以通过代码定义页面转场的效果、返回。

在设计转场动画时，我们需要留意的是导航栏是 Native 的还是 HTML5 的。如果导航栏是 Native 的，那 HTML5 页面不包括导航栏，它相当于是网页外的元素，不在转场效果的设计范围内。

WebView

说 HTML5 的跳转，就不得不说 WebView。简单来说，WebView 是在 App 中用于显示 web 内容的容器。上文提到的 MPA 和 SPA，都装在了这个叫做 WebView 的容器中。

用户点击页面中的元素进行跳转，除了前面的两种方式外，还有第三种：新打开 WebView 的方式。在这样的方式下，跳转的本质是 HTML5「告诉」Native，由 Native 执行打开新 WebView，并在新 WebView 中加载页面。

因为 Native 的机制，打开新 WebView 的同时，之前的 WebView 会被自然、完整地保留。所以这时，之前的几个问题就变为：

跳转动画：页面间的跳转动画由 WebView 之间的跳转动画来决定。
返回后页面停留在原位置：完美支持。
iOS 右滑返回：完美支持。

不过需要注意的地方是，打开新 WebView 是一个资源消耗比较大的操作。如果我们在设计一个流程时，需要比较多的连续使用这种方式，需要和研发同学进行充分的沟通。

比较特殊的Replace

前述的三种跳转，都会产生历史记录。MPA、SPA 的历史记录是在 HTML5 中产生，新开 WebView 中的记录是在 Native 中产生。

在 MPA 或 SPA 中，如果跳转时使用 Replace 方法，它会用新页面替换之前的页面，历史记录中没有之前页面的记录。

这是一种特殊的跳转方式，在设计一些不可逆的流程时可考虑使用。

多页面回退

了解了上述的几种机制后，我们来看一个小的应用场景──多页面回退。

我们在实际业务中，经常会有这样的需求。假设我们有 1、2、3 三个页组成的一个流程，在页面 3 上有个「完成」按钮点击回到页面 1。在不同的交互模式下，实现这样的跳转有着不同的机制。

1. SPA模式下的正常跳转

这种模式是 3 个页面都在一个 WebView 中。点击页面 3 中的「完成」按钮，回退 -2 ，即回退 2 步历史记录，到页面 1。

2. 新打开WebView

打开新 WebView 又分三种方式。

如果我们把 3 个页面，拆分到 2 个 WebView 中，如下图，点击完成按钮，即关闭自身所在的 WebView。

同样是打开新的 WebView，如果我们按如下图的方法拆分会稍微复杂。这时点击完成按钮，首先关闭自身所在的 WebView，当页面 2「意识」到自己重新被展现时，自动退回 1 步到页面 1。

每次打开新的 WebView，这时点击完成，回退的本质是 HTML5「告诉」Native 关闭多个 WebView。需要特别注意的是，HTML5 中实现这种方式不是天然具备的，它需要 Native 具有一次关闭多个 WebView 的能力。所以我们在设计方案时，需要了解清楚自家的 Native 是否有这样的能力。

总结

以上，简单说了几种 HTML5 的跳转方式。这些跳转方式，没有绝对的对与错，我们在设计方案时，需要根据实际的业务需求与技术的限制，来整体考虑解决方案。

根据个人经验，也有几点小帖士分享给大家：

前后逻辑交织不复杂的单个页面，可以考虑使用新 WebView 打开跳转。
如果是一个任务型的流程，可以考虑将一个任务流包在一个 WebView 中，在任务内使用 SPA 跳转。不同的任务使用不同的 WebView。保持任务之间的关系清晰明了。
设计上需要着重表现页面间转场动画的效果，优先考虑使用 SPA 跳转。
为防止流程过于复杂，尽量不要自定义关闭、返回的行为。保持关闭为默认的关闭行为，保持返回为默认的返回行为。

航切换设计到CSS中标签属性设置：隐藏、显示

涉及html5异步传输的特性

更需要知道js多标签时候元素选择的写法

再啰嗦一下：classLIst属性返回元素的类名，可以用方法add()、remove()添加class属性

setAttribute(name,value)设置新属性及其值，或者修改已有属性的值

正文

上导航切换的示意图

js代码：

window.onload = function () { //window.onload:就是等整个页面内容全部加载完毕

//填写js逻辑

//获取ul里li的个数

var tab_ui = document.getElementsByTagName("ul");

var tab_li= tab_ui[0].getElementsByTagName("li")

//获取要显示的div的个数

var content = document.getElementById("content");

var content_div = content.getElementsByTagName("div");

//给li添加鼠标点击事件

for(var i= 0;i<tab_li.length;i++){

tab_li[i].index = i; //异步传输，不设置的话，得到的都是i的最大值

tab_li[i].onclick = function () {

//清除之前的样式

for(var j=0;j<tab_li.length;j++){

//没有点击事件，j=0,1,2

tab_li[j].classList.remove("active");

content_div[j].setAttribute("class","hidden");

}

//设置自己本身的样式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 无效，i=3导致

//将对应的内容显示出来

content_div[this.index].classList.remove("hidden");

}

//给li添加鼠标点击事件

var tab_ui = document.getElementsByTagName("ul");

var tab_li1= tab_ui[1].getElementsByTagName("li")

//var tab_li1= document.getElementsById("li")

var content1 = document.getElementById("content1");

var content1_div = content1.getElementsByTagName("div");

for(var i= 0;i<tab_li1.length;i++){

tab_li1[i].index = i; //重点，为了让i在循环体内

tab_li1[i].onmouseover = function () {

//这里的i永远=3，如果不设置 tab_li[i].index = i

//清除之前的样式

for(var j=0;j<tab_li1.length;j++){

//没有点击事件，j=0,1,2

tab_li1[j].classList.remove("active");

content1_div[j].setAttribute("class","hidden");

}

//设置自己本身的样式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 无效，i=3导致

//将对应的内容显示出来

content1_div[this.index].classList.remove("hidden");

}

</script>

css代码

<style>

.hidden{

display: none;

}

.tabdemo>.active{

background: red;

border-bottom-color:white ;

}

#wrap{

height: 58px;

background-color: #c7eafa;

}

.tabdemo {

width: 100%;

list-style: none;

margin: 0 auto;

background-color: blue;

}

.tabdemo1 {

width: auto;

list-style: none;

margin: 0 auto;

background-color: pink;

float:left;

}

li{

color: rgb(0, 0, 0);

display:inline-block;

}

ul.tabdemo1 li {

color: rgb(224, 9, 9);

display:block;

}

li:hover{

background-color: lavender;

}

一定注意要把a转成行内块元素，

如果转的是块元素那么短竖线会掉下去，

因为块级元素是独占一行的

display:inline-block;

padding: 0 20px;

line-height: 58px;

text-decoration: none;

color: black;

}

</style>

html代码

<!DOCTYPE html>

<html>

<head>

<title>多导航切换</title>

</head>

//js代码、css代码放在这里

<body>

<div>

</ul>

</div>

</div>

</div>

</div>

<div>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

HTML5的优良特性很快被各种类型的网站利用，比如文件拖拽到网页上传功能，多数即使用HTML5提供的新属性就可以完成，来实现素材的免插件拖放。因此，HTML5技术实际上在国内已经获得了较广泛的应用与支持。从硬件角度来看，国内手机和平板两种移动设备应用最广，PC端次之，紧接着是电视和游戏设备。从软件角度来看，桌面浏览器对HTML5的支持高于移动浏览器，最高可达95%；而从整体上而言，移动浏览器对HTML5的支持却优于桌面浏览器。根据百度流量研究院统计，2016年国内桌面浏览器市场份额最大的是Chrome，约占39.4%；IE次之，约占29.24%。其中，占比高达17%的IE 8.0对HTML5并不友好。然而，微软已宣布停止对IE 6-10的技术支持，并打算放弃IE浏览器及Windows 10以下系统。因此，低版本IE份额正呈快速下降趋势，2016年降到2%以下。

1.4.4 HTML5平台的兴起

2014年，在微信平台的帮助下，HTML5社交小游戏获得爆炸式传播，同期为HTML5平台以提供制作工具服务进入市场的起点。到了2015年，越来越多公司在HTML5品牌推广上进行布局。在商业需求的驱动下，HTML5页面设计的目的性更强，获得最好传播效果的基本是经过一定时间策划，在团队操作下有针对性地进行投放的企业案例。相对应地，原有HTML5平台也进行了大面积升级。从平台性质而言，HTML5平台可分为轻营销模板类、功能引擎类和基础工具类三种：

（1）轻营销模板类：提供类似PPT页面切换的HTML5制作工具，通常面向个人用户，部分为企业用户。该类平台的数量较大，只适用于轻度营销，所能提供的页面动态效果局限于翻页。如图1所示：

图1 易企秀桌面工具编辑界面和作品

在线咨询

上一篇：ESP32 DHT11 / DHT22 Web服务器
下一篇：在 JS 中如何使用 Ajax 来进行请求

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

踩过许多坑后，送你这份H5交互的页面跳转方式总结

您的项目需求