window.open被浏览器拦截的解决方案

最近做项目遇到window.open打开窗口被浏览器拦截的问题，具体是在ajax请求数据之后打开新窗口，被浏览器拦截，这样让人很头疼。
总结发现当window.open为用户触发事件内部或者加载时，不会被拦截，一旦将弹出代码移动到ajax或者一段异步代码内部，马上就出现被拦截的表现了。
js直接执行：

window.open(‘//www.baidu.com‘, ‘_blank‘);

部分浏览器是阻止弹出的。
对于下面的代码：

 document.body.addEventListener(‘click‘, function() {
            window.open(‘//www.baidu.com‘, ‘_blank‘);
        });

所有浏览器不会拦截。

解决方案

1.使用a标签

 function newWin(url, id) {
              var a = document.createElement(‘a‘);
              a.setAttribute(‘href‘, url);
              a.setAttribute(‘target‘, ‘_blank‘);
              a.setAttribute(‘id‘, id);
              // 防止反复添加
              if(!document.getElementById(id)) {                     
                  document.body.appendChild(a);
              }
              a.click();
  }

此函数绑定在click的回调函数里可以解决大部分浏览器被拦截。

2.使用form的submit方法打开一个页面

模拟form表单提交来打开一个新的页面
        function open_page(url, param) {
            var form = '<form action="' + url + '"  target="_blank"  id="windowOpen" style="display:none">';
            for(var key in param) {
                form += '<input name="' + key + '" value="' + param[key] + '"/>';
            }
            form += '</form>';
            $('body').append(form);
            $('#windowOpen').submit();
            $('#windowOpen').remove();
      }
      var url='https://www.baidu.com'；
        var param={a:1};
        open_page(url,param);

大家注意，以上两种方法不适合放在ajax的回调函数中，如果放在回调函数中，依然会被浏览器拦截。

3.终极解决方案–先弹出窗口，然后重定向

xx.addEventListener(‘click‘, function () {
            // 打开页面，此处最好使用提示页面
            var newWin = window.open(‘loading page‘);
            ajax().done(function() {
                // 重定向到目标页面
                newWin.location.href = ‘target url‘;
            });
        });

以上方法其实是打开了两个地址，所以建议大家打开第一个地址的时候给出一个类似‘当前页面正在加载中，请稍后。。’的简单提示页，这样可以避免打开两次真正的目标页面，让用户察觉到页面的重定向。

4、一个取巧的方法，使用弹窗

非用户操作的打开窗口被禁止的，所以我们可以在html里写一个弹窗，回调函数里把弹窗显示，然后点击弹窗的确定按钮执行打开新窗口的操作，不会被拦截。