移动端返回上一页实现方法

2023-09-05 阅读 297 评论 0

摘要：一、问题描述: 　　使用window.history.go(-1)或者window.history.back(-1)实现移动端返回上一页功能，原生safair浏览器里存在问题（通过flex布局的上一张页面滚动无效，只能显示点击前停留的那屏，无法通过触摸滚动页面）。存在于ios 9.3(13

一、问题描述:

　　使用window.history.go(-1)或者window.history.back(-1)实现移动端返回上一页功能，原生safair浏览器里存在问题（通过flex布局的上一张页面滚动无效，只能显示点击前停留的那屏，无法通过触摸滚动页面）。存在于ios 9.3(13E233)和ios9.3.1(13E238)系统,ios9.3其它版本未发现该问题，ios安装的其它浏览器不存在该问题，android也没有该问题。

二、解决方案：

　　ios原生浏览器（ios其它浏览器不存在这种情况）下通过document.referrer实现返回上一页，部分手机的QQ内嵌浏览器使用document.referrer不能正常返回上一页，android下通过referrer属性实现时，当刷新页面后返回前一页失效，所以判断移动端浏览器类型针对原生safair进行处理，具体代码如下：

<a href="#" id="goBack" >返回</a>var u = navigator.userAgent;
var goBack=document.getElementById("goBack");
//针对ios原生浏览器处理
if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) && /(Safari)/i.test(u)){goBack.setAttribute("onclick","javascript:window.location=document.referrer;");
}