关于返回按钮的事情

 

 在微信的项目涉及到多个不同的项目间跳转那么头部的返回按钮怎么办呢?

在项目之间跳转还有在微信菜单进入页面时我们用了一个中转页进行参数处理和页面跳转判断

目前要用到code,userId等从后端写好的带参数的url到前端获取然后去调用后端的一个校验code和获取userID如果有userID就请求跳转接口

如果没有就跳转到登录页注册绑定

然后跳转到另外一个项目的那么我们得用到window.location.replace跳转过去

用了window.location.replace后我们就没有window.history了

那么问题来了产品要求跳过去的项目得保留返回按钮

那么我们可以window.history.length的多少判断有没有返回的内容咯(不同浏览器值不一样chrome没有历史内容的时候是1)

理论上当window.history.length小于没历史内容条数的时候可以跳到别的一些自己定义的界面

但是你要在跳到的这个页面A里面点了里面的链接然后跳转到B页面后再返回页面A那么他的window.history.length会增加的那么判断就不准确了我们window.history.back()没有反应了

这时候应该要用document.referrer === ''来判断他有没来源

window.history.length>1 && document.referrer !== ''?window.history.back():(typeof(WeixinJSBridge)=="undefined" ? window.close() : WeixinJSBridge.call('closeWindow'));像我写的是这样的(没法解决上面的问题第一次是可以的但是重B页面返回后就不可以了咋整啊郁闷!~)

document.referrer有一些兼容性问题的不过用在H5下应该还好具体看如下

操作IE6IE7IE8IE9FirefoxChromeOperaSafari
直接在地址栏输入URL“”“”“”“”“”“”“”“”
从书签访问URL“”“”“”“”“”“”“”“”
从页面A点击超链接,跳转到页面B(target=”_self”)
从页面A点击超链接,跳转到页面B(target=”_blank”)
从页面A右键单击超链接,在新标签页中打开页面B-“”
从页面A右键单击超链接,在新窗口中打开页面B“”
拖动链接到地址栏“”无法拖动无法拖动“”“”“”“”“”
拖动链接到标签栏-“”“”“”“”“”“”“”
使用浏览器的前进、后退按钮
JS 修改 location.href“”“”“”
JS 使用 window.open“”“”“”“”
服务器重定向(302跳转)定向之前的页面定向之前的页面定向之前的页面定向之前的页面定向之前的页面定向之前的页面定向之前的页面定向之前的页面
页面 Meta Refresh“”“”“”“”“”转向页转向页转向页

上表中的“√”表示能正常取到 referrer,”” 表示 referrer 为空。

除了 IE 外,其它浏览器都是目前官网上能下载到的最新版本,其中 Safari 同时测试了 Windows 版和 Mac 版,结论一样。

另外还有一些情况未做测试,例如点击 Flash 跳转时各浏览器下能否保持 referrer 等。

上表中大部分情况是符合预期的,不过似乎也有几处需要注意的:

1、在 Safari 中,右键打开链接会丢失 referrer;
2、在 IE 中,修改 location.href 或使用 window.open 打开页面会丢失 referrer(IE 9 有一点例外,使用 location.href 跳转不会丢失 referrer);
3、使用 meta 跳转时,IE / Firefox 下会丢失 referrer。

最后,一个简单的结论是:如果你需要通过 document.referrer 采集页面访问来源,最好不要使用 JS 跳转或打开新窗口,也不要使用 meta 跳转。

 

上面的数据是

参考网站:http://www.jb51.net/article/52349.htm得出的我就搬过来记录一下

 

 最后的解决方法我还是用的其他方法实现了

用的是sessionStorage.setItem来存状态判断

 

========================================

有网友说:可以变通一点,go之前注册一个onbeforeunload事件,如果能够go就会触发这个事件,否则不会触发。如果只是锚点跳转,页面并不真正离开,那就判断一下hash的变化。

不知道可行不可行

转载于:https://www.cnblogs.com/lichuntian/p/6078534.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值