浏览器拦截新窗口问题总结
一般情况下，对于用户正常操作手动触发的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页面，表现一个友好的过度效果，等异步程序处理完后就会指向对应的页面
标签：浏览器,拦截,窗口,解决,解决方案,优化,代码优化 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。