针对safari阻塞异步开启新tab的解决方案

问题

• 问题有两个
  • 在用户触发的浏览器事件中，异步的使用window.open开启一个新的tab失败
  • 在用户触发的浏览器事件中，异步的使用js代码调用form表单的提交function失败

解决问题1

• 由于safari不能接受异步的window.open,那么我们首先同步的window.open一个空白的tab，然后获取新tab的window对象的引用（window.open（）的返回值就是新tab window对象的引用）
• 处理异步事件
• 处理完之后将想要跳转的url赋值给新tab的window.location.href给出想要跳转的新数值即可

 const newTab = window.open('')
    setTimeout(() => {
      newTab.location.href = 'http://www.baidu.com'
    }, 3000)

补充知识

• window.open的用法
  • 作用：打开一个新的窗体
  • 返回值：新窗体window对象的引用
  • 参数
    • 第一个：就是新窗体url
    • 第二个：用于设置弹出窗体的名称，如果使用已有的窗体或框架名称作为name参数，那么url网址将在这个窗体或框架页面载入
    • 第三个：就是一些窗口的属性了
    • -----> 第二个参数相对比较不常用但是很有用
  • 使用举例：

    <button onclick={()=>{window.open('','newTab')}}/>
    <a href='www.baidu.com' target='newTab' />
    //可以通过给tab创建一个窗口名，然后很多target的值都可以指向这个窗口名，就可以在指定的tab中打开页面
    

解决问题2

• 早就知道大家都采用同步打开新tab，异步给tab赋url的方式解决safari的这个问题
• 但是发现自己的情况是要做到表单提交而表单提交打开新的tab并不是又我自己来做的，因此我也不能够控制他同步打开然后异步赋值
• 直到发现window.open有第二个参数
  • 因此依旧是同步的打开一个tabwindow.open('','newPay')但是一定要给第二个参数值
  • 然后将form标签的target属性值设置为window.open('','newPay')的第二个参数。就可以在同步打开的tab中load form submit的结果