safari之坑

情景描述

• 接着上一篇简书
• 发现点击button（在form表单之外的button
• 在click事件调用了form的submit()方法
• 发现
  • chrome可以再新的tab中开启第三方支付的页面
  • safari不可以
    • 但是在setting->security->block popup window（取消勾选）
    • 然后就可以正常的开启新的tab

问题解决

• Q1:safari到底是不支持什么，是开启新的tab还是不支持redirect？
• A1:首先尝试直接使用window.open开启一个tab，当用户点击button直接调用window.opensafari和chrome都没有任何问题
  • 接着尝试在用户点击button的时候直接调用form的submit方法（form的targat值是_self）
  • 发现请求的response status是302直接做了redirect（在safari和chrome）

本来想直接确定在safari和chrome上既可以redirect也可以window.open但是突然意识到一个问题我们的这些处理都是同步的

总结：

• Safari is blocking any call to window.open() which is made inside an async call
• safari阻塞了来自其他线程的浏览器事件仅仅支持在当前用户触发浏览器事件的线程中进行js调用浏览器事件
  • 对于safari能够支持js和用户触发的同步事件
    • safari能够支持用户触发的事件（比如click submit）
      • 也能够支持在用户触发的事件中使用js调用事件（比如在用户触发的click事件中使用js提交表单或者是使用window.open）
      • 但是不能够支持用户触发的事件中执行异步的js调用事件（比如休息10s之后再做window.open）
  • 但是这些问题都能够通过取消safari的block popup实现
• 很坑爹的是：不能在非用户触发事件函数中使用js调用浏览器的事件（比如submit window.open）

解决方案

• 现在我只找到了处理异步window.open的方式
  • 首先用户点击button
  • 然后在click中首先先window.open()
  • 然后const newTab = window.open()
  • 执行异步方法
  • 回调中执行newTab.location = http://www.baidu.com

其实就是同步的先打开一个空白tab，将引用保存，然后异步处理完毕之后再将这儿空白tab做一个redirect。这样的方式也不好，希望有更好的解决方案。

我是没啥办法了，看到朋友们如果有好的解决方案请写下来帮帮我~