window.open() 被拦截后的分析

前言：
此文章仅是我的工做中遇到问题后的一些记录和总结，可能毫无心义。。

事件回顾：

在开发中，PM要求在一个页面中输入多个连接而后能够一键在新窗口打开，因此就想到用window.open来实现，可是测试的时候发现会被拦截

 

分析：

关于window.open的用户不少前辈都有写过相关文章，就不在这里介绍了，查看window.open用法

针对不一样的浏览器作了如下测试

1.用户点击事件内，触发打开一个新窗口

用户点击事件触发新窗口是例如：

obj.onclick=function(){

window.open(url);

}

经过用户事件触发的新窗口打开，这种形式打开新窗口浏览器会认为是用户本身须要的，大多浏览器是不会拦截的

目前测试的几个用户事件，只有click和dbclick是浏览器不会拦截的

窗口拦截不仅是跟浏览器内核有关，因此对原生IE和几个常见IE内核的浏览器都有作测试

事件：click，dbclick

不拦截的浏览器有：Chrome，FF，IE 6.0-10.0，Safari，Opera，360浏览器

拦截：搜狗浏览器

事件：mouseover，mousemove，mouseout，scroll等等

不拦截：无

拦截：Chrome，FF，IE 6.0-10.0，Safari，Opera，360浏览器

2.用户点击事件内，触发打开多个新窗口

点击一次成功打开多个窗口的浏览器：FF，360浏览器，Safari

点击一次打开第一个窗口，后面的窗口拦截的浏览器：Chrome，IE 6.0-10.0，Opera

3.Javascript自动触发打开窗口

如：

setTimeout(function(){ window.open('http://www.baidu.com')},1000)

或者ajax请求成功后执行

$obj.click(function(){

$.ajax({

sucss:function(data){

if(data){

 window.open('http://www.baidu.com')

}

}

})

})

拦截的浏览器：测试的几个浏览器都拦截

解决方案：

1.对于ajax返回后在打开新窗口，能够在用户点击后就打开一个空白窗口，而后再返回成功后给空白窗口一个url，这样就不会被拦截了

$obj.click(function(){

var newTab=window.open('about:blank');

$.ajax({

sucss:function(data){

if(data){

 //window.open('http://www.baidu.com');

newTab.location.href="http://www.baidu.com";

}

}

})

})

2.脚本自行触发打开的新窗口

看网上不少说新建a标签，模拟点击，经测试，无效，请大牛指导

 

 

 

 

 

 

 

 

 

 

 

 

 

问题：

前面开发项目时碰到一个问题，ajax 异步请求成功后须要新开窗口打开 url，使用的是 window.open() 方法，可是很惋惜被浏览器给拦截了，怎么解决这个问题呢？
分析：

浏览器之因此拦截新开窗口是由于该操做并非用户主动触发的，因此它认为这是不安全的就拦截了（不过若是是 _self 的话就不会有这个限制），即便 ajax 回调函数中模拟执行 click 或者 submit 等用户行为（trigger('click')），浏览器也会认为不是由用户主动触发的，所以不能被安全执行，因此被拦截。
解决方法：

一、异步改成同步，即：async:false

二、将新开窗口指向为一个对象，而后修改对象的 url，好比：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$( '.task' ).bind( 'click' , function (){ var w = window.open(); $.ajax({ type: 'POST' , url: '/surveyTask' , dataType: 'json' , error: function (){ w.close(); }, success: function (res){ w.location = res.url; } }); });

最后须要说明的是：网上的动态添加 form 新开窗口的方法，并不适合 ajax 请求，至少博主测试了下仍然被浏览器所拦截。