支付宝收费后跳转html代码,PC端支付宝开发最终的页面跳转问题

支付宝支付一般是请求接口后收到一组form表单代码，在h5中，可以直接像下面这样直接使用

doPayAlipay(alipayNeedParams).then(resAlipay=>{

if(resAlipay.code==0){

const div = document.createElement('div');

div.innerHTML = resAlipay.data.form;

document.body.appendChild(div);

document.getElementById('alipayForm').submit();

}

})

但是在pc中就不能酱紫了，我们得给他新开一个标签页或者弹窗，那么可以使用window.open亦或者下面的方法

doPayAlipay(alipayNeedParams).then(resAlipay=>{

if(resAlipay.code==0){

const div = document.createElement('div');

div.innerHTML = `Alipay`;

document.body.appendChild(div);

document.getElementById('triggerAlipay').click()

}

})

但是最终酱紫是会被浏览器拦截掉的，因为该操作不是用户主动触发的，浏览器认为酱紫不安全所以拦截了( _self 不会限制)

最终找到一个相对完美的方法，先打开一个空白页，待异步成功之后再赋予链接地址：

let newOpenWindow = window.open('about:blank');

doPayAlipay(alipayNeedParams).then(resAlipay=>{

if(resAlipay.code==0){

this.$tools.storage.set('alipayForm', resAlipay.data.form)

newOpenWindow.location = this.payAliUrl

// ...

}

})

中转页面类似这样：

即将跳转到支付宝...

export default {

head(){

return {

title: '跳转中...'

}

},

created(){

if(process.client){

let alipayForm = this.$tools.storage.get('alipayForm')

if(alipayForm && this.$store.getters.isLogin){

const div = document.createElement('div');

div.innerHTML = alipayForm;

document.body.appendChild(div);

this.$tools.storage.remove('alipayForm')

document.getElementsByName('punchout_form')[0].submit();

}else{

this.$alert('非法进入！','警告',{showClose:false}).then(()=>{

this.$router.replace(this.$tools.urlMerge('/', this.$route))

})

}

}

}

}

相关资料