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

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

问题描述

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

image.png

问题原因

在浏览器的安全机制里,非用户触发的弹出窗口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);
        }
    })
});
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改