控制浏览器自带返回按钮

需求背景
小程序权益详情页面跳转外部H5任务进度页面查看和领取权益。
遇到的问题
浏览器自带返回按钮无法返回之前的小程序页面或需要多次按返回按钮返回之前的小程序页面。
解决方案一（放弃）
原本考虑在页面加上一个自定义的返回按钮来让用户点击返回到小程序页面（太特么丑了，不管放在页面的任何位置都显得异常的怪异）。

// 先引入JSSDK
import wx from 'weixin-js-sdk';// 关键代码
wx.miniProgram.getEnv(res => {if (res.miniprogram) {// 小程序端跳转小程序指定页面wx.miniProgram.redirectTo({url: '/pages/vip/detail/detail',});} else {// 微信端直接关闭页面WeixinJSBridge.call('closeWindow');}});

解决方案二（采纳）
监听浏览器自带返回按钮的事件，直接控制浏览器返回操作后去往哪里。

 // 关键代码（监听浏览器返回按钮）window.addEventListener('popstate',e => {//回调函数中实现需要的功能// alert("我监听到了浏览器的返回按钮事件啦");this.goBack();},false);goBack = () => {wx.miniProgram.getEnv(res => {if (res.miniprogram) {wx.miniProgram.redirectTo({url: '/pages/vip/detail/detail',});} else {WeixinJSBridge.call('closeWindow');}});};// 进入页面有微信静默授权获取openid，在成功获取openid之后调用此方法（pushHistory）
pushHistory = () => {let link = location.href.split('#')[1];var state = {title: '升级好礼',url: `${location.origin}/#${link}`,};// window.history.pushState(state, state.title, state.url);};

pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容：

状态对象 — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。

状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，我们规定了状态对象在序列化表示后有640k的大小限制。如果你给 pushState() 方法传了一个序列化后大于640k的状态对象，该方法会抛出异常。如果你需要更大的空间，建议使用 sessionStorage 以及 localStorage.

标题 — Firefox 目前忽略这个参数，但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者，你可以为跳转的state传递一个短标题。

URL — 该参数定义了新的历史URL记录。注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，比如在用户重新打开浏览器时。新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。该参数是可选的，缺省为当前URL。
在某种意义上，调用 pushState() 与设置 window.location = “#foo” 类似，二者都会在当前页面创建并激活新的历史记录。但 pushState() 具有如下几条优点：

新的 URL 可以是与当前URL同源的任意URL 。相反，只有在修改哈希时，设置 window.location 才能是同一个 document。
如果你不想改URL，就不用改。相反，设置 window.location = “#foo”;在当前哈希不是 #foo 时，才能创建新的历史记录项。
你可以将任意数据和新的历史记录项相关联。而基于哈希的方式，要把所有相关数据编码为短字符串。
如果标题随后还会被浏览器所用到，那么这个数据是可以被使用的（哈希则不是）。
注意 pushState() 绝对不会触发 hashchange 事件，即使新的URL与旧的URL仅哈希不同也是如此。

控制浏览器自带返回按钮相关推荐

vue.使用popstate监听点击浏览器自带返回按钮
我写在了app.vue,大家可以按项目需要写在需要的位置 <script> export default {name: 'App',mounted(){// 监听返回事件,点击系统返回时i ...
改变iOS系统自带返回按钮事件
最近要用到用系统自带的带箭头的返回按钮返回到指定的ViewController 或者返回到RootViewController, 自定义NaviBarItem也可以但是想用系统的箭头,就偶然 ...
监听在微信中打开页面时的自带返回按钮事件
为什么80%的码农都做不了架构师?>>> 这里所说的返回按钮是 iOS 端微信打开页面,左上角的返回按钮 Android 端微信打开页面,手机底部的实体返回按钮事件处理代 ...
H5禁止浏览器自带返回事件
需求: h5页面有进无退对禁止后退方法统一封装: let XBack = {};XBack.STATE = 'x - back' XBack.elementXBack.onPopState = fu ...
浏览器返回按钮跳转到指定页面
浏览器返回按钮跳转到指定页面在使用手机浏览器打开网页时,我们会发现有时候点击浏览器下方的返回按钮,并未返回到首页,而是会跳转到其他页面. 怎么实现呢,下面跟大家简单分享一下: 1.改变浏览器回退的历 ...
小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
微信浏览器返回按钮二次返回
在做微信开发的时候,当通过微信的推送消息(页面1)打开网页后(进入页面2),此时,再次打击链接打开网页(页面3).当点击安卓手机的返回按钮时,可以正常回退到"页面2",但是当点击微 ...
uc浏览器返回按钮的兼容_浏览器的返回、后退、上一页按钮的事件方法
我相信很多朋友像我一样,在百度.搜狗里面搜索很久都没找到方法.下面就来告诉大家怎样监听的方法: 首先我们要了解浏览器的history.大家知道在页面中我们可以使用JavaScript window h ...
IOS 微信返回按钮事件控制弹层关闭还是返回上一页
在微信公共号内绑定域名后或微信内打开第三方链接跳转非单页面网站时,经常会有弹层Modal的需求,此时如果用户习惯性点击微信自带的返回"<"按钮,就会跳转回上一页或退出网站,而 ...

控制浏览器自带返回按钮

控制浏览器自带返回按钮相关推荐

最新文章

热门文章