【飞天奔月出品】Ajax提交数据之后,打开新窗口被浏览器拦截总结
【飞天奔月出品】Ajax提交数据之后,打开新窗口被浏览器拦截总结1. 场景:官方商城在订单确认页面(order confirm page),点击
2. 问题但是使用以下几种代码,偶尔(并不是每次)会被浏览器拦截 2.1 ajax 之后,直接用 window.open(url)略 2.2 ajax 之后,表单提交示例: 页面放一个 form <form id="payForm" action="/payment/goToPaymentDirect.htm" target="_blank"> <input type="hidden" name="subOrdinate" id="subOrdinate" value="" /> <input type="hidden" name="payType" id="payType" value="" /> </form> 在ajax 得到结果之后,将相关hidden 附上值,并 提交表单 $('#subOrdinate').val(subOrdinate); $('#payType').val(payType) $("#payForm").submit(); 依然会被浏览器拦截 2.3 ajax 之后,设置一个 a标签,然后模拟点击示例: 页面放了个 空的a <%-- 自定义提交链接 --%> <a id="paymentLink" ="" target="_blank" style="display:none"></a> js 里面 ajax post 提交,拿到支付相关的链接,通过赋予 a 链接href 属性,模拟click 事件实现 //订单确认 $j("#createOrderButton").click(function(){ var formData=getFormDataToSubmit(); //sConfirm('请您在新打开的页面中完成付款','付款完成前请不要关闭本页面!') var data = loxia.syncXhrPost(_contextPath+"/transaction/create",formData); if(null!=data && true==data.result){ var paymentFullRequestURL=data.paymentFullRequestURL; $j("#paymentLink").attr("href",paymentFullRequestURL); document.getElementById("paymentLink").click();//$j("#paymentLink").click();//这种方式不行 } }); 以上代码,曾在 3. 原因当 Ajax之后打开窗体,浏览器会认为可能是 4. 解决方案在stackoverflow找到了解决方案,参见 Bypass popup blocker on window.open when JQuery event.preventDefault() is set 4.1 核心思想先通过用户点击打开一个window,然后再对这个window进行重定向 4.2 流程:
如
4.3 示例代码:$('#createOrder').on('tap',function(){ var windowObj = window.open(); //在提交 `ajax` 之前,先定义一个 `window` $.ajax({ type: 'POST',url: base + '/transaction/create',dataType: 'json',async:false,//注意是 async:false success: function(result){ var subOrdinate = result.returnObject.subOrdinate; var payType=$('input[name="paymentInfoSubForm.paymentType"]').val(); var paymentHref=base+"/payment/goToPaymentDirect.htm?subOrdinate="+subOrdinate+"&payType="+payType; windowObj.location = paymentHref; //do something else //比如 弹出友好型提示层 },error: function(){ //如果提交失败,或者校验有问题,这里需要关闭 打开的window windowObj.close(); } }); }); 5. 参考
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |