900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 打开支付宝 html 如何处理支付宝支付后端返回的html代码

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

时间:2019-10-01 20:36:36

相关推荐

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

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

value='{"body":"\u652f\u4ed8\u5b9d\u5145\u503c","subject":"\u8bc1\u5b9d\u5b9d-WEB\u7aef\u652f\u4ed8\u5b9d\u5145\u503c(1\u5143)","out_trade_no":"0827mK8vqssEAGanbdei","timeout_express":"30m","total_amount":1,"product_code":"FAST_INSTANT_TRADE_PAY"}'/>

type='hidden' name='app_id' value='091301899737'/>

type='hidden' name='format' value='json'/>

type='hidden' name='method' value='alipay.trade.page.pay'/>

value='-08-27 14:12:15'/>

type='hidden' name='alipay_sdk' value='alipay-sdk-php-1101'/>

value='/open/alipay/app/listener'/>

type='hidden' name='return_url' value=''/>

value='UTF-8'/>

name='sign'

value='lSk75QEwYbxK3hIRcgAfv2A++rZef7sVRGqMQLo2O5KWzCuiXnd0As4FPyNiK1Q0lcUUGvrog3Loyzk0ChEvg8QBsFeAaNjjPp3WaQFUTIfv+JC6s2GoWdFiAgS+oBRsZg0piDu7nP7UYXJyi/VLxaxKSbQhKbWeTSD3ATFiApxLP7HeA81snUQ8fpL04DJjegS4KKZvvsAHUOza071T9LgzB/9EuquFUXNyVYSPutlGFRJj8RLyVRNJmsUYsWgXW5tGD9SEvdcuYosiiREugbOssX+nPacsT6gFzw4IWSnfGZNEutoPidWxwCk4Ai1dZtrY1FfkeuajNoIvd2IBjw=='/>

type='submit' value='ok' style='display:none;''>

document.forms['alipaysubmit'].submit();

可以利用以下方式,首先将后端返回的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('')

});

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

var btn = $('#btn');

btn.click(function () {

$.ajax({

url: 'ooxx',

success: function (url) {

//会被拦截

window.open(url);

}

})

});

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

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

在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();

})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。