Html5监听返回事件

常使用的场景:移动前端
1、安卓手机物理返回键
2、苹果手机在企业微信打开浏览器的返回按钮

移动前端开发语言是:vue
路由跳转:vue-router hash模式

先介绍一下html5中history有哪些属性和API,我们用到了其中2个方法(pushState、replaceState),来根据状态存储的数据判断是否触发返回事件
1、window.history.length - 历史记录长度 (只读)
2、window.history.state - 历史记录状态 (只读)
3、window.history.go(num) - 回到指定的历史记录(参数num可以是正/负)
4、window.history.back() - 回到上一个历史记录
5、window.history.forward() - 回到下一个历史记录(前提当前历史记录不是最新的)
6、window.history.pushState(state, title, newUrl) - 新增一个历史记录(路径等于当前的url + newUrl )
7、window.history.replaceState(state, title, newUrl) - 替换当前的历史记录路径(路径等于当前的url + newUrl )

监听事件:window.onpopstate

pushState和replaceState作用演示:

打开当前页面路径如下(D:/webstorm_workspace/demo-code/eventListenerBack/test.html),历史记录长度1
Html5监听返回事件_第1张图片
点击pushState按钮:创建了一条新的历史记录(新建状态)、历史记录长度2
Html5监听返回事件_第2张图片
pushState按钮的代码如下:

// pushState会新建一条历史记录
pushState = () => {
     
  let state = {
     'name': '张三 - pushState'}
  window.history.pushState(state, null, '?pushState')
  console.log('pushState')
  console.log(window.history.state)
}

点击replaceState按钮:替换当前的历史记录(更新状态),历史记录长度2
Html5监听返回事件_第3张图片
replaceState按钮的代码如下:

// replaceState会覆盖当前的历史记录
replaceState = () => {
     
  let state = {
     'name': '张三 - replaceState'}
  window.history.replaceState(state, null, '?replaceState')
  console.log('replaceState')
  console.log(window.history.state)
}

监听事件演示

点击返回按钮:会触发监听事件window.onpopstate方法;之前的路径是(D:/webstorm_workspace/demo-code/eventListenerBack/test.html?replaceState),返回到(D:/webstorm_workspace/demo-code/eventListenerBack/test.html)
Html5监听返回事件_第4张图片
返回按钮的代码如下:

// 返回按钮监听
window.onpopstate = (e) => {
     
  console.log('触发onpopstate方法')
  console.log(historyState)
  // 判断前一个历史记录存储的state数据来确定是否需要改变当前的数据
}

总结

1、什么时候会触发这个监听事件?除了back方法,go和forward方法也可以触发
2、前进后退历史记录需要根据条件判断时,需要绑定监听事件

vue-router模式:vue-router hash模式和html5 history api提供的模式都是不刷新页面来改变页面的内容

演示代码:Html5监听返回

你可能感兴趣的:(Html,+,Css,+,JavaScript,Html5监听事件,安卓物理返回键,ios企业微信打开浏览器的返回,window.history)