Two solutions to the problem of Ajax opening a new window and being intercepted by the browser

Recently when I was making a payment, I found that the browser blocked the payment window when it was opened. What happened? Let me share with you two solutions to the problem of Ajax opening a new window and being intercepted by the browser. Let’s take a look.

Recently, when I was making a payment, I found that the payment window was intercepted by the browser when opening it. After searching on Baidu, I found out that it was Because Ajax is used to verify whether payment can be made before opening the window, the user did not actively trigger the opening of the ixin window. The browser thought this was unsafe, so it blocked it.

Solution 1

First open an empty new window, and then change the url of the new window. The specific code is

var wd = window.open();
$.ajax({
  type: "POST",
  dataType: "json",
  url: URL,
  data: {orderNo:orderNo},
  success: function(data) {
    if(data.status=='success'){
      wd.location.href = 'http://www.baidu.com';
    }else{ 
      alert('订单不能支付！'); 
    }
  },error: function(data) {
    alert("正在加载请稍后！");
  }
});

This implementation has a drawback, that is, regardless of whether ajax is successful or not, the line of code var wd = window.open(); will be executed, so success and failure will Open a new window unless it is closed after failure, but this user experience will be very bad, so I used the second method to implement it.

Solution 2

Because ajax is asynchronous by default, it has high performance and good user experience, but it also leads to security issues , to make the browser think that popping up a new window is safe, all ajax must be synchronized before popping up a new window. The specific code is

$.ajax({
  type: "POST",
  dataType: "json",
  url: URL,
  async: false,//同步请求
  data: {orderNo:orderNo},
  success: function(data) {
     if(data.status=='success'){
       window.open("www.baidu.com");
     }else{
       alert('订单不能支付！');
     }
  },
  error: function(data) {
    alert("正在加载请稍后！");
  }
});

The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

Ajax verification code for duplicate implementation

Ajax implements phpcms like function (picture and text Tutorial)

ajax implementation of page loading and content deletion

# #

The above is the detailed content of Two solutions to the problem of Ajax opening a new window and being intercepted by the browser. For more information, please follow other related articles on the PHP Chinese website!