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

Posted on | In |

在项目中遇到一个问题：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>