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

本文主要是介绍浏览器拦截新窗口问题的解决方案和优化方案，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

一般情况下，对于用户正常操作手动触发的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页面，表现一个友好的过度效果，等异步程序处理完后就会指向对应的页面

这篇关于浏览器拦截新窗口问题的解决方案和优化方案的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！