前几天在将一个已有的H5项目，嵌入小程序，遇到小程序左上角无法返回的问题，

H5 页面中，浏览器/安卓/小程序 的 back（返回） 键，默认会直接回退到上一个页面，这听起来似乎十分正常。

但是当遇到不按常识的现象时，我们就要思考，是不是有哪个知识点，我们是缺失的？最后定位到是由于在返回这里做了特殊逻辑，特意控制不能正常返回的

本文背景

我们在平时浏览页面时，习惯了，点左上角的返回，但是有没用想想这个返回是不是可以由代码来控制呢？比如希望能监听到返回事件并且做一些处理。

本文内容

我们每次访问浏览器的时候,浏览器会按照时间的顺序把访问的页面放到历史记录里面，而且每个次都会有一个索引，默认是从0开始依此类推,所以我们刚开打浏览器控制台输出的length是1。

除此之外

HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。可以用来通过代码控制返回的一些额外业务逻辑，

其中本文开头描述的，不允许返回，也是基于该事件来完成



参考文章

1）解决浏览器返回页面不刷新的问题

https://juejin.im/post/6844903818191175687

2）移动端h5监听浏览器返回操作（目前在react项目中用到）

https://juejin.im/post/6844903649378992136

3）你必须知道的路由原理

https://juejin.im/post/6844903858255167501

4）H5：“同样是返回，我们不一样”

https://juejin.im/entry/6844903625823633415

5）SPA路由机制详解（看不懂不要钱~~）

https://juejin.im/post/6844903682828402701

本文备注

我在社区有几篇实践文章，讲述正常情况下webview嵌入小程序的跳转

小程序webview嵌入H5网页，网页之间跳转实践? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000c6e20624a10e0720b80e895b813

本文总结

该文描述内容同样适用于下面需求的实现

~~~

今天中午在领完盒饭，吃饭的时候，正吃着深海鳕鱼片，蘸上番茄酱，那美味，简直无以言表。突然产品急匆匆的跑过来说：“我们要做一个搜索功能，用户在搜索框输入不同的搜索关键词时，url也要跟着变化，但是页面不能被刷新...保证用户刷新页面的时候还能定位到当前的搜索关键词”吧啦吧吧说了一大堆后，留下一句：“这个需求很简单，怎么实现我不管”，便扬长而去...留下我独自一人，面对着我已经凉透的深海鳕鱼片...

~~~~