1. Scenario:
On the order confirmation page of the official mall, 确认订单
when you click the button, you need to go through the following code process
- ajax submit data to create order
- If the previous order is successfully created, jump to the payment channel to pay
2. Questions
But using the following codes, occasionally (not every time) will be intercepted by the browser
2.1 After ajax, use window.open(url) directly
slightly
2.2 After ajax, the form is submitted
Example:
Put a form on the page
<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>
After ajax gets the result, attach the relevant hidden value and submit the form
$('#subOrdinate').val(subOrdinate); $('#payType').val(payType) $("#payForm").submit();
2.3 After ajax, set an a tag, and then simulate a click
Example:
The page put an empty a
<%-- Custom Submit Link--%> <a id="paymentLink" ="" target="_blank" style="display:none"></a>
Submit ajax post in js, get payment-related links, and simulate click events by assigning a link href attribute.
//Order Confirmation $j("#createOrderButton").click(function(){ var formData=getFormDataToSubmit(); //sConfirm('Please complete the payment in the newly opened page', 'Please do not close this page until the payment is completed!') 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();//This method does not work } });
The above code has been 2012年
tested on the left and right, and it is ok. If you use this trick this time, there is still a chance that it will be intercepted by the browser.
3. Reason
When it window.open
is 用户触发事件或者加载时
, it will not be intercepted; once the code is moved into ajax, it may be intercepted.
Open the form after Ajax, the browser will think it may be 广告弹窗
the code of the class
4. Solutions
Found a solution on stackoverflow, see Bypass popup blocker on window.open when JQuery event.preventDefault() is set
4.1 Core idea
First open a window by the user's click, and then redirect the window
4.2 Process:
-
Before submitting
ajax
, define awindow
Such as
var windowObj = window.open();
-
Submit a
ajax
request, this request needs to beasync:false
-
If
ajax
successful, then thewindowObj
new address will be appended, such aswindowObj.location = paymentHref;
-
If it
ajax
fails or exception, then it needs to bewindowObj
closed, such aswindowObj.close();
4.3 Sample code:
$('#createOrder').on('tap',function(){ var windowObj = window.open(); //before submitting `ajax`, define a `window` $.ajax({ type: 'POST', url: base + '/transaction/create', dataType: 'json', async:false, //Note that it is 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 //For example, a friendly prompt layer pops up }, error: function(){ //If the submission fails, or there is a problem with the verification, the open window needs to be closed here windowObj.close(); } }); });