坑爹的Safari浏览器

一、事件经过：

前两天有客服反馈一个移动端vue项目用户点击一个按钮时，确认框自动帮用户选择了取消按钮；先后有三个用户反馈，他们的共同点是都是ios的Safari浏览器；因此初步判断可能是Safari浏览器拦截了弹窗，因此在自己的手机上找相应的选项，没有找到；然后搜索Safari confirm发现Navigating back breaks alert/confirm/prompt dialogs on iOS Safari 这篇文章，瞬间醍醐灌顶：原来是因为用户之前使用了“前进”或“后退”按钮，导致第二次进入时，confirm对话框默认自动选择false（该弹窗不会展示）。其实不光confirm，alert及prompt 均不会展示出来；然后用自己手机复现，果然如此。。。。
知道原因了，最简单的解决方案就出来了：

// 弃用--只兼容ios， 华为自带浏览器表现为一直刷新项目
   window.addEventListener('popstate', function () {
     window.location.reload()
    });

//   兼容ios和安卓浏览器  华为自带浏览器不会一直刷新项目  
// # [移动端popstate的怪异行为](https://www.cnblogs.com/zhangzhicheng/p/9508742.html)

    window.onload=function(){
      setTimeout(function(){
        window.addEventListener('popstate', function () {
          window.location.reload()
        });
      },0)
    }

当然，还有一种解决方案就是 自己写个对话框；

二、总结：

1、有些bug可以大胆猜想原因；
2、如果感觉浏览器有某些不正常的行为时，可以选择合适的关键词及搜索引擎进行检索，检索后英文资料别忽略了；
3、用户反馈bug时，可能信息不完整（这次有三个用户录屏反馈了该bug，但是他们三个都没有录制他们之前进行了“前进”或“后退”操作，而是录制出现bug时的情况），因此出现bug时需要问清楚或看清楚用户完整的操作过程；ps：这次这个bug，很像《调试九法》中的，那个用画笔从左上角往右下角画的例子，所以用户出现bug，有条件的最好能够亲临现场，因为这样可以不会遗漏一些重要信息；

三、补充：

另外，Safari浏览器还有一个行为很坑爹，就是如果在A网站中 动态插入B网站的 iframe ，插入时往B网站写cookie写不进去，需要预先在B网站写入cookie才能写入；

router.beforeEach((to, from, next) => {
  Cookie.set('presetcookie', 'a'); // 预设cookie 防止在Safari浏览器无效
  if (!Cookie.get('presetcookie')) {
    // eslint-disable-next-line
    alert('监测到您的浏览器禁用了cookie或者不支持设置cookie，请启用cookie或者更换浏览器。')
  }

})