window.open()被浏览器拦截了

在项目中遇到一个问题:JavaScript脚本用 window.open 打开一个窗口被浏览器拦截了。

不出意外的话此时浏览器已经拦截了一个页面了,除非浏览器被设置为默认不拦截任何窗口。

弹出窗口的原因是页面被注入了以下代码。

1
2
3
<script>
window.open('https://abigaleypc.github.io/');
</script>

被拦截的原因是页面并非用户所触发,所以被浏览器拦截了。

解决方法:让用户触发窗口弹出

假如让用户触发窗口打开,代码如下:

1
2
3
4
5
6
7
<button id="popups">弹出</button>
<script>
var btn = document.getElementById('popups');
btn.addEventListener('click',function(){
window.open('https://abigaleypc.github.io/');
})
</script>

解决Ajax请求出现的拦截

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>