window.history页面栈实现h5首页退到微信小程序

jyk肯肯

已于 2025-03-07 10:16:10 修改

阅读量1.1k

点赞数 9

文章标签：小程序

于 2024-06-19 15:19:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40912969/article/details/138854965

版权

文章目录

前言
window.history
- history属性
- history方法
页面栈的维护
popstate/hashchange事件
维护H5的页面栈

前言

最近在处理微信小程序内嵌的h5如何退回到微信小程序的问题，网上查了一些方法都不太好用，后来发现只要h5维护好页面栈就能轻易退出。

window.history

History对象提供了操作浏览器会话历史的接口，可以通过window.history来获取History对象的引用，来执行一些导航操作。
在这里插入图片描述

history属性

history.length  // 页面栈数量（只读），包括当前页
history.state  // 用于保存当前页面信息

history方法

这些接口可以让你在不刷新页面的情况下改变浏览器地址栏的URL：

// 跳到指定页面, 可以传url或数字, 调用go()/go(0)时会刷新页面
history.go()  

// 后退, 与用户点击浏览器返回按钮效果一致, 等同于history.go(-1)
history.back()

// 前进, 与用户点击浏览器前进按钮效果一致，等同于history.go(1)
history.forward()

/** 
* 将页面push进页面栈
* state: 如果你不做任何标识可以传null
* title: 浏览器标题(现在都不支持，所以都传空字符串''，你可以通过document.title = 'xxxx'去修改)
* url: 可以是任何和当前url同源的地址 如'/xxxx'
*/
history.pushState(state, title, url)

// 更新当前页面栈
history.replaceState(state, title, url)

页面栈的维护

用户在浏览器中导航到不同的页面时，浏览器会维护一个称为history stack的数据结构，用于记录用户的浏览会话历史。
这个栈包含了用户访问过的页面的信息，但是由于安全和隐私考虑，JavaScript无法直接访问该栈中的具体页面URL。

（如何维护页面栈为个人观点，仅供参考）

如果依次进入A、B、C、D、E页面，页面栈结构将是：
在这里插入图片描述
history.length长度为5，即有页面栈里有5个页面：

移动当前页指针

【操作】history.go()、history.forward()、history.back()、点击浏览器前进按钮、点击浏览器后退按钮等前进后退操作。
【页面栈变化】只有当前页指针在页面栈之间移动，不会改变页面栈的数量，即history.length不变。
在这里插入图片描述

【示例】我在E页面进行前进后退操作时，刷新了页面内容，但history.length数量不会变。在这里插入图片描述

【注意】当移动到栈顶时无法再前进，即浏览器前进按钮置灰，调用history.go(1)、history.forward()不再看到效果；
移动到栈底时同理。

添加页面栈

【操作】history.pushState()、history.go(url)、点击跳转等跳转新页面操作。
【页面栈变化】会清空当前页之后的页面并push新页面，当前页指针指向这个新页面，页面栈数量被更改，即history.length会增加或减少。

【示例1】我在E页面跳转新页面F，history.length增加1。
在这里插入图片描述
【示例2】我在B页面跳转新页面F，history.length减少至3。

进行这些导航操作时，刷新了页面内容，history.length数量增加或减少：
在这里插入图片描述

替换页面栈

【操作】history.replaceState等替换当前页操作
【页面栈变化】更改当前页指针指向内容，不会改变页面栈的数量，即history.length不变。

【示例】我在B页面，替换为F页面。
在B页面跳到F页面

进行这些导航操作时，不会更新页面内容，history.length数量不变：
在这里插入图片描述

popstate/hashchange事件

当浏览器的历史记录发生变化时，会触发popstate/hashchange事件

// html5 api提供了popstate方法
window.addEventListener('popstate', function(event) {
  // 触发方式： 点击浏览器的前进、后退按钮、调用history.back、history.forward、更改window.location.hash
  // 非触发方式：window.history.pushState、window.history.replaceState、点击跳转（点击跳转页面时实际上调用的是window.history.pushState、window.history.replaceState方法）
});

// 老版本浏览器用hashchange事件做兼容
window.addEventListener('hashchange', function(event) {
});