浏览器拦截新窗口问题的解决方案和优化方案

浏览器拦截新窗口问题总结

一般情况下，对于用户正常操作手动触发的a标签、window.open、form表单提交等方式打开新窗口时是不会被浏览器拦截的，可以正常的打开。但是由于业务需求当我们需要在异步的程序中去打开新窗口时，由于浏览器的安全机制，用户未始终允许的情况下，可能会触发到浏览器拦截，无法正常直接弹出。

几种打开新窗口的方式

1.window.open()

2.创建a标签target=_blank，手动触发a.click()

3.创建form表单，手动触发form.submit()

解决方法

1，我们可以在异步程序调用之前先打开一个新窗口，并指定窗口名称

window.open("about:blank", 'windowName');

$.ajax({...});

2，在异步程序中处理创建a标签，并将a标签的target属性指向新窗口的名称windowName。form表单方式同理。

window.open("about:blank", 'windowName');
$.ajax({
    url:'/test',
    method: 'post',
    success: function(data) {
        /* a标签打开方式*/
        let a = document.createElement('a');
        a.setAttribute('href', data.url);
        a.setAttribute('target', 'windowName');
        document.body.appendChild(a);
        a.click();

        /* form表单打开方式*/
        $form.attr('target', 'windowName').submit();
    }
});

优化方案

问题1：由于上述方法中打开的是一个空白页面，对用户很不友好，所以我们可以在项目中添加一个loading页面，然后打开它。

问题2：由于上述新窗口名称写了一个固定的值，会导致打开新窗口后新窗口没有关闭时，再次打开新窗口时就会继续指向相同名称的窗口，而不是继续打开新窗口，所以建议在窗口名称上添加时间戳。

假设过度页面的路由为：/loading，那么：

let windowName = 'windowName' + new Date().getTime();
window.open("/loading", windowName);
$.ajax({
    url:'/test',
    method: 'post',
    success: function(data) {
        /* a标签打开方式*/
        let a = document.createElement('a');
        a.setAttribute('href', data.url);
        a.setAttribute('target', windowName);
        document.body.appendChild(a);
        a.click();

        /* form表单打开方式*/
        $form.attr('target', windowName).submit();
    }
});

现在新开窗口时就会打开loading页面，表现一个友好的过度效果，等异步程序处理完后就会指向对应的页面。