背景:
该项目为h5游戏平台,游戏方的页面通过iframe展示,支付使用的是我们自己的收银台,集成了微信h5支付、微信公众号支付、微信pc端扫码支付、支付宝、
银联,支付流程为游戏内点击支付后调用我们接口,我们接口再重定向到收银台页面,此时一直在iframe内。
问题:
- safari内无法跳转微信app,能自动从iframe内跳转到最外层,以及跳转微信的链接,但不能掉起微信
- 支付宝支付,提示右上角safari打开,打开的是外层链接,非iframe链接,无法正常使用
- 在安卓微信,iframe里面不能调用公众号支付
解决:
一开始将微信支付的链接跳转由window.location.href改为top.location.href,解决了问题3
后来直接将iframe内的链接重定向到最外层
if(top.location != location) {
top.location.href = location.href;
}
但safari还是无法跳转微信app,分析发现,从iframe跳到最外层这一操作必须由用户点击触发,自动跳转不行
接下来考虑如何让用户多点一下,默认选中银联让用户去改,或是点两次立即支付按钮
现在是在safari里面默认选中银联,用户点击任意支付方式后,页面重定向到最外层,然后再点立即支付
if(top.location != location) {
if((/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent))) {
//这里选中银联
}else{
top.location.href = location.href;
}
}
奇怪的是用户本身有一次在iframe最外层点击支付按钮的行为,为啥不行呢?
2018年9月21日 11:04:22 优化
改为点击底部支付按钮后,iframe跳转到最外层,并将选中的支付渠道传出来,然后自动点击支付渠道,以及自动点击支付按钮,这样用户也就只有一次点击操作;注意自动点击click()的时候,需要放到最底部,保证dom元素已经生成,以及事件都已绑定;
也就无需判断浏览器,全部都统一处理了;再就是今天发现qq浏览器更新后,上面那段检查出来也是safari了;
$('#goPay').click(function() {
try {
if(top.location != location) {
var href = location.href
href = href.indexOf('?') > -1 ? href + '&jumpout=' + (++payMethod) : href + '?jumpout=' + (++payMethod)
//jumpout从iframe中跳出,参数为1、2、3,对应3种支付,有0的话后面不能直接用if判断,不然也是false;注意++放到前面
top.location.href = href;
}
} catch(e) {
console.log(e)
}
...
...
})
//如果有jumpout,表示从iframe中跳出,则自动选中然后自动点击支付
//需要放到最底部,保证dom元素已经生成,以及事件都已绑定;注意--放到前面
if(jumpout) {
$('.pay-method').eq(--jumpout).click()
$('#goPay').click()
}
ps:
"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
a标签的target
_blank:重新打开一个窗口
_parent:父窗口执行重定向
_self:自身页面重定向
_top:第一个父窗口重定向