关于H5中返回不生效的问题

在H5中使用window.history.go(-1);不能生效

如果app中内置h5的跳转页面,当在其中使用window.history.go(-1)时,并不能返回

  • 可以使用解决

    location.href = document.referrer;
    

关于document.referrer

获取前一页面的URL地址的方法:document.referrer

referrer 属性可返回载入当前文档的文档的 URL, 如果当前文档不是通过超链接访问的,那么当前文档的URL为NULL,这个属性允许客户端的 javascript 访问 HTTP 头部;

referrer 属性,我们可以从 http 头部获取

在控制的network中的请求头中可以找到referrer的信息

无法获取 referrer 信息的情况

  • 直接在浏览器中输入地址

  • 使用location.reload()刷新(location.href或者location.replace()刷新有信息)

  • 在微信对话框中,点击进入微信自身浏览器

  • 扫码进入微信或QQ的浏览器

  • 直接新窗口打开一个页面

  • 从https的网站直接进入一个http协议的网站(Chrome下亲测)

  • a标签设置rel="noreferrer"(兼容IE7+)

  • meta标签来控制不让浏览器发送referer

  • 点击 flash 内部链接

  • Chrome4.0以下,IE 5.5+以下返回空的字符串

  • 使用 修改 Location 进行页面导航的方法,会导致在IE下丢失 referrer,这可能是IE的一个BUG

  • 跨域

    <meta content="never" name="referrer">
    

document.referrer 的兼容性

document.referrer IE7都支持,它的兼容性比较高,Android 5.0开始支持,iOS都支持,PC端浏览器从IE7就开始支持了,兼容性没有什么大的问题。

但是有个小小的问题,就是 IE 会主动清除 referref 属性。在IE中用javascript做跳转,比如用window.location.href = “”; google如果使用document.referrer无法取到浏览器请求的HTTP referrer,因为IE清空了。而其他主流浏览器Firefox和Chrome都会保留referrer,没办法,只好判断,如果是IE浏览器,就主动给它增加一个 referrer 。这样的原理就是给IE浏览器的页面偷偷加了个链接,然后自动点这个链接,于是referrer就能保留了。

var url = 'http://www.jb51.net';   
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || /MSIE(\d+\.\d+);/.test(navigator.userAgent))   
{   
    var referLink = document.createElement('a');   
    referLink.href = url;   
    document.body.appendChild(referLink);   
    referLink.click();   
} else {   
    location.href = url;   
}

document.referrer应用情景处理

  • 根据 document.referrer 的来源来判断是否有来源信息,如果没有,则返回首页:
if (typeof document.referrer === '') {
    // 没有来源页面信息的时候,改成首页URL地址
    $('.jsBack').attr('href', '/');
}
  • 这样,当再次点击返回按钮时,就可以返回首页了。
  • 根据 document.referrer 的来源url 是否为网站的 url,如果判断这个 url 的来路有问题,则屏蔽该 url 下的所有信息,比如不让其显示图片等。可以有效的防止盗链,目前百度统计,google ads统计,CNZZ统计,都是用的这个方法。

window.history.back(-1);与window.go(-1);的区别

window.history.back(-1) window.history.go(-1)
history.back(-1): 直接返回当前页的上一页,数据全部消息,是个新页面 window.location.reload(); //刷新
history.go(-1): 也是返回当前页的上一页,不过表单里的数据全部还在 window.history.go(1); //前进
history.back(1) 前进 window.history.go(-1); //返回+刷新
history.back(-1) 后退 window.history.forward(); //前进
window.history.back(); //返回

你可能感兴趣的:(Tools)