解决浏览器中window.open()弹出窗口被拦截问题

问题描述

使用window.open()打开新页面被阻止

问题原因

在浏览器的安全机制里，非用户触发的弹出窗口window.open()会被阻止，会被认为是用户不希望打开的新页面。

即：当 window.open() 在 click 事件中可以被执行，但是放在ajax回调函数中则会被拦截。

解决办法

• 1、先弹出一个页面，再执行ajax，在回调函数中给页面赋值

var btn = $('#btn');
btn.click(function () {
    //打开一个不被拦截的新窗口
    var newWindow = window.open();
    $.ajax({
        url: 'ooxx',
        success: function (url) {
            //修改新窗口的url
            newWindow.location.href = url;
        }
    })
});

这样虽然可以逃过窗口拦截，但是当接口返回错误时，此时新页面已经打开，为空页面，用户体验不好。

改进方法：

• 2、js新建一个a标签，在a中设置url，再手动触发click事件

function openUrl(url){
  let a = document.createElement('a');
  a.target = '_blank';
  a.href = url;
  window.document.body.appendChild(a);
  a.click();
  window.document.body.removeChild(a);
}
var btn = $('#btn');
btn.click(function () {
    $.ajax({
        url: 'ooxx',
        success: function (url) {
            //修改新窗口的url
            openUrl(url);
        }
    })
});