ajax请求里面调用window.open会被浏览器拦截（优化版）

最新推荐文章于 2023-06-02 15:52:51 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

文章标签：后端

原文链接：https://segmentfault.com/a/1190000014988094

本文探讨了Ajax请求中使用window.open遇到的问题及两种解决方案。第一种方案通过创建空窗口并根据Ajax回调结果决定是否加载内容，提高了用户体验。第二种方案采用同步请求方式，但存在浏览器对站外网址拦截的现象。

众所周知，ajax请求里面调用window.open会被浏览器拦截方法有两种解决办法，但是经测验例如ajax改为async：false同步请求还会出现一些问题（比如站点外网址被拦截）；

第一种解决办法优化：

该方法优点描述：比如ajax回调函数失败，浏览器默认打开的空链接会自动关闭，用户体验比较好。

 var newwin;
    $("#btn").click(function(){
        newwim = window.open();
        //此处调用ajax，异步即可：
        $.ajax({
            type:'POST',
            url: ajaxurl,       
            dataType : 'json',
            data:parameter,  
            beforeSend : function(){},
            success:function(data) {
                if(data.TSR_CODE == "0"){                
                       newwin.location.href = xxx;//xxx为后端返回的地址;            
                }else{
                    alert(data.TSR_MSG);
                    newwin.close();//此处为ajax失败方法，自动关闭刚才会打开的页面；
                }
            },
            error:function(){
                console.log("访问出错，请重试!");
            },
            complete:function(){}
        });
    });

第二种解决办法分析：

此方法测试过：比如后台返回的是站外网址，谷歌浏览器、360浏览器等等会拦截请求，火狐、qq浏览器不会拦截，预测是浏览器自身对站外网址这种类型做了拦截，普通的网址不被拦截；

 $("#btn").click(function(){
        //此处调用ajax，异步即可：
        $.ajax({
            type:'POST',
            url: ajaxurl,       
            dataType : 'json',
            async：false,//改为同步请求
            data:parameter,  
            beforeSend : function(){},
            success:function(data) {
                if(data.TSR_CODE == "0"){                
                     window.open(xxx);               
                }else{
                    alert(data.TSR_MSG);                    
                }
            },
            error:function(){
                console.log("访问出错，请重试!");
            },
            complete:function(){}
        });