解决浏览器拦截弹出窗口问题
2018-09-28 22:02
489 查看
问题描述:
当使用新窗口弹出页面时,浏览器有时会默认拦截弹出,并不友好。
比如使用第三方支付宝api做支付的时候如果浏览器拦截支付弹窗,可能会导致用户不去付款。
解决方案:
方案一:浏览器拦截的机制就是认为是非用户触发的,所以会去拦截,那么我们的思路就是让他变成用户触发的,去避免浏览器进行拦截。
1、在组件加载时就去请求支付宝三方接口拿到返回的form表单数据
mounted(){ let _params = { orderId:this.order.orderId, amount:this.order.totalPrice, serviceName:this.pkl.serviceChn[this.order.serviceId] } paymentAlipayApi(_params).then(res => { if(res.status === 200){ this.alipayData = res.data } }) }
2、然后当点击立即支付的时候,就触发form的submit方法,规避浏览器拦截机制。
//确认付款 submitPay(){ if(this.paymentMethod === 0){//微信付款 this.wxData = { orderId:this.order.orderId, amount:this.order.totalPrice, serviceName:this.pkl.serviceChn[this.order.serviceId] } this.wxShow = true }else if(this.paymentMethod === 1){//支付宝付款 this.paymentAlipay() } }, //支付宝付款 paymentAlipay(){ document.querySelector('form[name="punchout_form"]').submit() },
此种方案的缺点是就算用户选择微信付款,也还是去请求的支付宝的三方接口,似乎并不是最好的解决方式。
那么看第二种:
方案二:我们点击的时候先打开一个空白的新窗口,这种浏览器也会认为是用户点击行为而不会拦截。网上很多例子是直接给新窗口的location.href设置为新url,但是在我们这种需要表单form提交的情况下不行。那么我的思路就是获取新窗口,然后给空白的新窗口innerHTML设置为支付宝返回的表单内容,然后在空白新窗口自身打开新页面,这样也可以解决此问题。因为支付宝三方接口返回的form表单默认就是从自身页面打开的,所以该方法可以规避方案一的问题。
//支付宝付款 paymentAlipay () { let params = { orderId: this.orderInfo.orderId, amount: this.orderInfo.totalPrice, serviceName: '2018嘉年华' + this.ticket.name } const newWin = window.open(); paymentAlipayApi(params).then(res => { if (res.status === 200) { newWin.document.body.innerHTML = res.data this.$nextTick(()=>{ newWin.document.querySelector('form[name="punchout_form"]').submit() }) } }) },
相关文章推荐
- 解决弹出的窗口window.open会被浏览器阻止的问题
- 解决弹出的窗口window.open会被浏览器阻止的问题(自定义open方法)
- 解决弹出的窗口window.open会被浏览器阻止的问题(自定义open方法)
- ajax请求弹出窗口被浏览器拦截的问题
- 解决ajax返回打开新窗口被浏览器拦截问题
- 浏览器弹出窗口被拦截解决办法
- 解决弹出的窗口window.open会被浏览器阻止的问题
- 解决弹出的窗口window.open会被浏览器阻止的问题
- 解决浏览器被web.9983.com劫持及不定期弹出广告窗口的问题(第3版)
- 解决弹出的窗口window.open会被浏览器阻止的问题(自定义open方法)
- Angular2项目中浏览器拦截弹出窗口的解决方法
- 浏览器弹出窗口被拦截解决办法
- 解决弹出的窗口window.open会被浏览器阻止的问题
- 如何解决浏览器弹出窗口的拦截(如:网页支付)
- 【转载】解决浏览器和discuz7.0论坛不兼容的方法,解决快捷回复弹出下载窗口的问题
- 网页支付弹出窗口被拦截的解决办法
- 解决jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug
- JavaScript页面刷新与弹出窗口问题解决方法
- [原创] 避免弹出窗口被如Google工具条拦截的解决办法
- 弹出页面被拦截的问题解决