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 为最优方式,如有不适地方欢迎指正~~ 

 ♪(^∇^*)~~

posted @ 2017-11-16 21:07  lmy_moonsky  阅读(229)  评论(0编辑  收藏  举报