JavaScript解决safari 无法打开新窗口问题

BB在前面

今天在做微信和支付宝H5支付的是否遇到一个为问题，后台返回url链接(微信)或form表单(支付宝)，需要保留当前订单页面在新窗口打开支付链接或提交支付表单。
由于浏览器的安全策略，浏览器会禁止程序自己打开新窗口。当然google或baidu有许多答案，这里我总结了最佳的解决方案，并完美通过测试。

新窗口打开url(微信H5支付)

在回调代码之前打开一个空窗口，例如 var w=window.open(xxx); 然后在回调函数中设置它的location

var openWin = function(){
    //打开一个新窗口
    var winRef = window.open('',"_blank");
    //假装获取请求支付参数
    $.ajax({
        type: '',
        url: '',
        data: '',
        ......
        success:function(json){
            //设置新窗口的跳转地址
            winRef.location = "www.baidu.com";
        }
    });
};

注： window.open() 操作必须放在用户操作事件内，用户主动操作的行为才能触发 window.open() 方法；如上代码用户主动触发 openWin() 方法， 且无法再异步方法如: ajax() 触发

新窗口提交form表单(支付宝H5支付)

原理同上面 新窗口打开url(微信H5支付) 的方法， 同样是在回调代码之前打开一个空窗口，不同之处在于我们需要在回调内将支付表单挂载到新窗口的DOM上，并提交表单

var openWin = function(){
    //打开一个新窗口
    var winRef = window.open('',"_blank");
    //假装获取请求支付参数
    $.ajax({
        type: '',
        url: '',
        data: '',
        ......
        success:function(json){
            //创建一个form表单容器div
            let div = document.createElement('div')
            //将支付form表单装载到容器
            div.innerHTML = json.form
            //将form表单容器挂载到DOM上
            winRef.document.body.appendChild(div)
            //获取这个表单
            let payform = winRef.document.forms['alipaysubmit']
            //提交这个表单
            payform.submit()
        }
    });
};

参考

window.open在Safari中不能打开的问题

chantszo
2019.6.11