我在项目上的需求:
点击图片出现的遮罩层,不仅希望可以点击遮罩层本身关闭,还需要点击安卓的物理返回键时可以关闭,这时候就出现了一个问题,微信内置的浏览器会认为返回键需要返回上一个页面,而我不希望如此。
如果有使用微信sdk的朋友,可能会用wx.previewImage()方法来解决,这是最好的做法,但我在项目上并没有调用微信的sdk,因此需要单独处理安卓的物理返回键。
感谢这篇文章让我找到思路,下图即为方法:
其中的window.history.pushState()是向历史进程中添加一个空的页面链接,让这一次点击返回键踏空,导致看起来是“无法回退”,从而表面上禁止了安卓的物理返回键。
但这里不够完善,因为你会在测试的时候发现pushHistory执行一次后,就不会再执行了,所以新的bug出来了:这里是禁用了一次返回键,但如果用户手抖多点了一两次呢?答案是:依然回退到上一个页面,而不是单纯地关闭遮罩层。
ok,那么我们要做的,就是在禁止的这一次函数里及时地加上一句类似于:$('.modal').hide(); 的语句,就可以了!
由于我项目上使用的是weui框架,因此,这个遮罩层在我这里应该称为“图片浏览器”,而我让图片浏览器消失的办法,应该是pb.close();
到此为止,我们解决了这个困惑。哈哈,希望对大家有帮助。