window.open 浏览器拦截问题解决方案

现象：当 window.open 是由用户触发事件内部或加载时不会被拦截，但在ajax回调或者异步代码中执行就会被拦截。

window.open('http://www.baidu.com', '_blank'); // 会被拦截

document.body.addEventListener('click', function() {
      window.open('http://www.baidu.com', '_blank'); // 不会被拦截
});

 

原因：浏览器检测到非用户操作弹出的窗口，就会被拦截，因为浏览器认为这不是用户希望打开的页面，因此弹出窗口让用户进行判断，是否允许加载。

 

解决方案：

方案 1、将 window.open('baidu.com') 打开新页面 用 <a href="baidu.com" target="_blank">打开新页面</a> 代替。优点：简单、方便；缺点：不适用于异步回调中打开新窗口；

 

方案 2、用form的submit方法 打开新页面，要构建一个form, 然后出发submit 提交表单信息，提交到新的页面。缺点：不适用于异步回调中打开新窗口；

var form = document.createElement('form');
form.action = 'www.baidu.com?id=1';
form.target = '_blank';
form.method = 'POST';
document.body.appendChild(form);
form.submit();

　　

方案 3、首先打开一个空白页面，然后在空白页面 location.href = 指定的要打开的URL，就具体如下：

// 打开页面，此处最好使用提示页面
    var newWin = window.open("loading page");
    $.post({}, function(res) {
      if (res.code === 200) {
        newWin.location.href = "target url"; // 成功 重定向到目标页面
      } else {
        newWin.close(); // 失败 则关闭 loading page
      }
    });

　　

方案3 为最优方式，如有不适地方欢迎指正~~ 

 ♪(^∇^*)~~