关于返回按钮的事情

Posted 2020-08-20 me春天

 

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

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

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

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

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

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

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

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

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

但是你要在跳到的这个页面A里面点了里面的链接然后再返回页面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‘));像我写的是这样的

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

操作	IE6	IE7	IE8	IE9	Firefox	Chrome	Opera	Safari
直接在地址栏输入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得出的我就搬过来记录一下