1,问题原因:浏览器兼容问题,Chrome支持,Safari不支持
解决姿势:https://blog.csdn.net/qingyuexiao/article/details/84707473
function goBack(){
//解决Safari中后退功能的兼容问题
if (navigator.userAgent && /(iPhone|iPad|iPod|Safari)/i.test(navigator.userAgent)) {
window.location.href = window.document.referrer;
} else {
window.history.back(-1); //根据需要可使用history.go(-1);
}
}
2,问题已经解决,我想说说我的场景与解题思路
场景是在vue框架的基础上,把某一个模块的页面,全部替换为第三方的站点,使用iframe标签去展示
一,可能是冒泡导致,因为是简单的调用了window.history.back()
参考:https://www.cnblogs.com/likesunny/p/5688429.html
所以自己写代码来验证,如下图:
测试后发现,不管我有没有阻止冒泡,在Chrome下和Safari下,都没有问题,我在考虑可能是第三方网站的代码问题,我去查了第三方的代码,就是简单的
window.history.back(-1)
,到这里并没有解决我的问题,想另外的方法
二,有没有可能是子页面window的问题
子页面下window拿到的可能是父页面的window
我使用了几种方式去验证
window
window.self
window.top
this
window.document.querySelector('iframe').contentWindow
- 因为第三方站点与父页面之间是跨域的,导致父页面
contentWindow
下是获取不到子页面document,很多事情就不好做了,可以通过postMessage是实现,但是还要监听,就放弃了 - 断点调试了一些,其实子页面直接获取的window,其实就是它当前的window,不管是否子页面的文档已经加载完成,
window.self === window.top
是false,也查看了this,window。
所以可以确定子页面拿到的window不是父页面的window,就是它当前的window
三,既然找不到源头,那我事后修改
就是监听返回事件,对监听的事件进行处理进行后补处理
使用的是window下popstate事件,这里不多解析,可以参考下:https://www.jb51.net/html5/606481.html
- popstate 事件只能在真机下移动端可以接收到
拿到事件之后,
发现拿到之后并没有多大作用 - 在子页面写监听,发现没有用,因为父页面已经返回,子页面监听到也没有作用
- 在父页面写监听,首先因为跨域contentWindow.history.back()不能调用,其次是父页面返回不了,或者返回后再跳回来,没有意义;
window.onpopstate = () => {
console.log('onpopstate')
window.history.pushState('forward', null, '#')
window.history.forward(1)
}
不过因为有些机子行有些不行,有些要点两下才有效果,可能是自己也不大懂popstate,pushstate
偶然翻到这一篇文章:https://www.cnblogs.com/zeussbook/p/10870479.html
说是浏览器问题,特意搜索Chrome下,Safari下的history.back(),果然是这样。终于知道时间是怎么过去的了