解决ajax请求里面调用window.open会被浏览器拦截问题

碰到一个问题:浏览器打开微信返回的一个授权链接总是被浏览器拦截,除非设置浏览器可弹出此窗口才可以打开,但是这样用户体验不好,就采取其他方式解决;
一开始我以为只是因为这个链接的安全性问题,所以会被浏览器拦截,所以就使用了其他方式来打开此链接,发现还是会被拦截;
后来发现根本原因是ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所以被拦截。
述问题在我解决问题时,也分为了两种场景:

1、ajax 返回成功后立即调用window.open()方法,代码如下:

//新添加代码
let newTab  = window.open("about:blank");
$.ajax({
            type: "post",
            url: xxx,
            data: JSON.stringify(params),
            contentType: "application/json;charset=UTF-8",
            success: function (response) {
                if (response.head.code === "00000000") {
                   //新添加代码
                   newTab.location.href = "www.baidu.com";  
                }else  if (response.head.code === "11111111") {

                } else {
                    
                }
            }
        });

2、 ajax执行后,还需要对ajax返回结果进行业务判断,根据不同的业务还需要弹出确认框进确认,然后根据相应的操作再决定是否跳转,

那么这里如果还是跟场景一一样的ajax调用执行前就打开窗口的话,很显然交互上面就不合适了,代码如下:

$.ajax({  
        type: "post",  
        url: "/xxxx/xxxx",  
       async: false,// 只加了个同步 
        data: {"param": param},  
        error: function (data) {  
            showError(data);  
        },  
        success: function (data) {  
            if (data.errorFlag == 0) {  
                if (data.status == 1) {  
                  
                 
                } else {  
                    window.open("www.baidu.com");  
                }  
            } else {  
              
            }  
        }  
    });  

根据不同的业务需求,对应不同的解决方法,不过如果不是必须一定要用异步的话,场景二的解决办法改动最小,最实用!!!

你可能感兴趣的:(解决ajax请求里面调用window.open会被浏览器拦截问题)