H5实现阻止浏览器返回的效果(uniapp)

这货不是狮子

已于 2023-05-25 23:21:04 修改

阅读量3.5k

点赞数 4

分类专栏：学习笔记文章标签：前端 vue.js uni-app javascript

于 2023-05-16 14:19:24 首次发布

本文链接：https://blog.csdn.net/weixin_43832950/article/details/130693108

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

最近在项目优化过程中遇到了一个问题，就是点击查看图片，图片在当前页面以遮罩层的形式展示在页面上，然后点击物理返回键，页面直接返回到了上一个页面，嗯？不对劲！确实是不合理的交互，图片还在展示的时候，点返回应该先把图片给收回来才对，于是拿着这个需求我就开启了思考...

一、需求分析

重新梳理下需要实现的效果：就是点击物理返回键或者浏览器返回的时候需要判断图片是否处于展示状态，如果不是，则正常返回；如果是，则需要先收起图片。

二、具体实现

本人是用uni-app开发的，所以从代码以uni-app为例

1.APP端

uni-app其实是有一个相应的生命周期可以监听到页面返回

这方法一开始都没搞懂是什么意思，后面遇到多了才理解。它能阻止页面的返回

onBackPress(e) {
	if (判断某些条件成立时阻止页面返回，做相应处理) {
		return true // 阻止返回，不阻止则不写
	}
}

根据这个方法就可以实现想要的效果，在页面即将关闭的时候，判断图片是否展示中，如果是，则阻止页面返回，收起图片。

onBackPress(e) {
	if (this.fullScreen) {
		this.fullScreen = false
		return true
	}
}

2.H5端

app端实现起来是十分方便，按道理H5端也可以用同样的方法去实现，but...在H5中，浏览器默认会监听返回按钮事件，而不会触发onBackPress函数。那么有没有可能去监听浏览器的返回呢？——答案当然是可以的

1. 首先在页面加载完后监听浏览器返回事件，并定义相应的方法

onLoad() {
	// #ifdef H5
	window.addEventListener('popstate', this.browserBack)
	// #endif
}

// 相当于
mounted() {
	// #ifdef H5
	window.addEventListener('popstate', this.browserBack)
	// #endif
}

// methods
browserBack() {
	if (this.fullScreen) {
		this.fullScreen = false
	}
}

2. 然后在点击查看图片的时候往浏览器push一条当前页面的记录（根据自己项目实际情况来决定push记录的时机）

openPic(url) {
	// #ifdef H5
    window.history.pushState(null, null, document.URL)
	// #endif
    this.fullScreenPic = url
    this.fullScreen = true
}

3. 需要注意的是，收起图片的时候需要同时返回页面栈，防止用户查看图片后正常收起图片，导致需要返回两次才能回到上一页的情况

closePic() {
	// #ifdef H5
    window.history.go(-1)
	// #endif
	this.fullScreen = false
}

4. 最后需要在页面注销的时候销毁监听事件，不然会影响其他页面

onUnload() {
	// #ifdef H5
	window.removeEventListener("popstate", this.browserBack);
	// #endif
}

// 相当于
destroyed() {
	// #ifdef H5
	window.removeEventListener("popstate", this.browserBack);
	// #endif
}