iframe子页面调用history.back(),父页面会返回的问题解答

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
所以自己写代码来验证，如下图：

首页.png

第二页.png

测试后发现，不管我有没有阻止冒泡，在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()，果然是这样。终于知道时间是怎么过去的了