解决Ajax用window.open打开新窗口被拦截问题

被拦截的原因:

浏览器安全机制中,页面弹窗,必须是在用户触发的,才算合法弹窗;由ajax或定时执行的弹窗均为非用户触发。会被浏览器或相关安全软件理解为广告被拦截掉;

解决方法一:

<a href="javascript:;" onclick="dialog();">点击弹窗</a>

<script>
function dialog(){
    var popup = window.open('about:blank', '_blank');  //先发起弹窗(因为是用户触发,所以不会被拦截)
    $.ajax({
        url: 'url',
        type: 'POST',
        dataType: 'json',
        data: {param1: 'value1'},
        success: function(data){
            popup.location = data.url;  //在重定向页面链接
        }
    })
}    
</script>

此方法的弊端:

  • 页面ajax弹窗为一次性操作。意思就是:从发起弹窗,到最后的重定向,一整套流程必须是一条线流程。如ajax成功后,做相关用户体验交互的校验(比如只有当校验成功才跳转),那该方法会影响页面交互,具体可自行测试

解决方法二:

<a href="javascript:;" onclick="dialog();">点击弹窗</a>

<script>
function dialog(){
    $.ajax({
        url: 'url',
        type: 'POST',
        dataType: 'json',
        async: false,  // 此处必须定义为同步
        data: {param1: 'value1'},
        success: function(data){
            window.open(data.url, '_blank');  //发起弹窗
        }
    })
}    
</script>

该方法弊端:

  • 实测能解决大部分浏览器的拦截问题,但是解决不了安全软件的拦截(360不会拦截,但是QQ管家会拦截)

解决方法三(有效):

<a href="javascript:;" onclick="dialog();">点击弹窗</a>

<script>
function dialog(){
    $.ajax({
        url: 'url',
        type: 'POST',
        dataType: 'json',
        async: false,  // 此处必须定义为同步
        data: {param1: 'value1'},
        success: function(data){
            gotourl(data.url);  //发起弹窗
        }
    })
}    

/**
 * 弹窗
 * @param  {string} url 跳转链接
 */
function gotourl(url){
    var a = $('<a href="'+ url +'" target="_blank">链接</a>');  //生成一个临时链接对象
    var d = a.get(0);
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );  //模拟点击操作
    d.dispatchEvent(e);
    a.remove();   // 点击后移除该对象
}
</script>

目前该方法亲测有效,可通过浏览器和安全软件;但所有浏览器兼容性未检测,请自行检测!

赞 (7)
分享到:更多 ()

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 咆哮的煮梦好吧……chrome会拦截,第三种回复
  2. 咆哮的煮梦最后一招非常棒,3Q回复
  3. 李悦之用最后一种方法试了,可行,在chrome和safari没问题,感谢~回复
  4. 路人甲设置成同步这里是关键啊,赞回复