如何处理支付宝支付后端返回的html代码

支付宝支付输入金额后发送ajax请求,后端返回的是一段html代码，如下：

<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=UTF-8' method='POST'>
    <input type='hidden' name='biz_content'
           value='{"body":"\u652f\u4ed8\u5b9d\u5145\u503c","subject":"\u8bc1\u5b9d\u5b9d-WEB\u7aef\u652f\u4ed8\u5b9d\u5145\u503c(1\u5143)","out_trade_no":"20170827mK8vqssEAGanbdei","timeout_express":"30m","total_amount":1,"product_code":"FAST_INSTANT_TRADE_PAY"}'/><input
        type='hidden' name='app_id' value='2016091301899737'/><input type='hidden' name='version' value='1.0'/><input
        type='hidden' name='format' value='json'/><input type='hidden' name='sign_type' value='RSA2'/><input
        type='hidden' name='method' value='alipay.trade.page.pay'/><input type='hidden' name='timestamp'
                                                                          value='2017-08-27 14:12:15'/><input
        type='hidden' name='alipay_sdk' value='alipay-sdk-php-20161101'/><input type='hidden' name='notify_url'
                                                                                value='https://keensting.fa123.com/open/alipay/app/listener'/><input
        type='hidden' name='return_url' value='https://www.baidu.com'/><input type='hidden' name='charset'
                                                                              value='UTF-8'/><input type='hidden'
                                                                                                    name='sign'
                                                                                                    value='lSk75QEwYbxK3hIRcgAfv2A++rZef7sVRGqMQLo2O5KWzCuiXnd0As4FPyNiK1Q0lcUUGvrog3Loyzk0ChEvg8QBsFeAaNjjPp3WaQFUTIfv+JC6s2GoWdFiAgS+oBRsZg0piDu7nP7UYXJyi/VLxaxKSbQhKbWeTSD3ATFiApxLP7HeA81snUQ8fpL04DJjegS4KKZvvsAHUOza071T9LgzB/9EuquFUXNyVYSPutlGFRJj8RLyVRNJmsUYsWgXW5tGD9SEvdcuYosiiREugbOssX+nPacsT6gFzw4IWSnfGZNEutoPidWxwCk4Ai1dZtrY1FfkeuajNoIvd2IBjw=='/><input
        type='submit' value='ok' style='display:none;''>
</form>
<script>document.forms['alipaysubmit'].submit();</script>

可以利用以下方式，首先将后端返回的html代码插入到当前页面中，然后提交表单，在当前页面直接实现跳转至支付宝支付页面。

        const div = document.createElement('div');
        div.innerHTML = res.data; // html code
        document.body.appendChild(div);
        document.forms.alipaysubmit.submit();

但是，以上方式会直接在本页面跳转，而我想要的是在新的标签页打开支付宝支付页面。得知设置表单target="_blank"可以在新标签页提交表单，所以修改代码如下：

        const div = document.createElement('div');
        div.innerHTML = res.data; // html code
        document.body.appendChild(div);
        document.forms.alipaysubmit.setAttribute('target', '_blank');
        document.forms.alipaysubmit.submit();

这样确实实现了在新标签页打开支付页面，但是这样chrome浏览器会以其为弹窗进行拦截，所以这种方法是行不通的。可以通过改变异步为同步async: false来避免拦截。但某些ajax库是不支持修改为同步的。于是决定使用winow.open来打开一个新的窗口。

window.open方法可以找开一个新的浏览器窗口。

var btn = $('#btn');
btn.click(function () {
    //不会被拦截
    window.open('http://www.baidu.com')
});

如上 window.open是用户触发的时候，是不会被拦截的，可以正常打开新窗口，所以，如果是用户主动触发弹窗，浏览器一般不会拦截。

var btn = $('#btn');
btn.click(function () {
    $.ajax({
        url: 'ooxx',
        success: function (url) {
            //会被拦截
            window.open(url);
        }
    })
});

如上 用户没有直接触发window.open，而是发出一个ajax请求，window.open方法被放在了ajax的回调函数里，这样的情况是会被拦截的

1. 当浏览器检测到非用户操作产生的新弹出窗口，则会对其进行阻止。因为浏览器认为这不是用户希望看到的页面

2. 在chrome的安全机制里面，非用户触发的window.open方法，是会被拦截的。

如何解决弹窗被拦截的问题，可以先打开一个不被拦截的空窗口，在异步请求后将href替换。如下：

    var btn = $('#btn');
    btn.click(function () {
        //打开一个不被拦截的新窗口
        var newWindow = window.open();
        $.ajax({
            url: 'ooxx',
            success: function (url) {
                //修改新窗口的url
                newWindow.location.href = url;
            }
        })
    });

但后端返回给我们的并不是一个url链接，而是一段html的form表单，所以我们可以结合以上的两种方法，先打开一个空的窗口，然后再在这个空的窗口里提交表单。

最终解决方案：

        const newTab = window.open();
        axios(...)
            .then(res=>{
                const div = document.createElement('div');
                div.innerHTML = res.data; // html code
                newTab.document.body.appendChild(div);
                newTab.document.forms.alipaysubmit.submit();
            })