问题描述:
1、在JS中直接使用window.open(url,"_blank")来打开新窗口是会被拦截的。PS:window.open(url,”_self”)改变当前的窗口可以生效。
2、在ajax异步请求完成后使用window.open来打开新窗口也会出现被拦截现象。
原因分析:
浏览器为了维护用户安全和体验,对于非用户操作产生的新弹出窗口会对其进行阻止,因为浏览器认为这不是一个用户希望看到的页面。
各浏览器对拦截时机的判断不一致。
对于放在ajax完成后的代码,浏览器会认为是网站自主弹出的窗口,有“流氓”的嫌疑。各浏览器的拦截反应也有所不同。
解决方案:
方案一、
创建一个a标签,利用a标签跳转,能解决大多数浏览器兼容问题,但是这种方法写在ajax异步请求完成后调用无效
function openWin(url) {var a = document.createElement("a"); //创建a标签a.setAttribute("href", url);a.setAttribute("target", "_blank");document.body.appendChild(a);a.click(); //执行当前对象}openWin("./page/......");
方案二、
模拟form表单提交,能解决大多数浏览器兼容问题,但是这种方法写在ajax异步请求完成后调用无效。
var form = document.createElement('form');form.action = '"./page/a.html?id=1';form.target = '_blank';form.method = 'POST';document.body.appendChild(form);form.submit();
方案三、
在ajax调用之前先打开窗口,然后再设置新窗口的url来达到跳转的效果,但是该方法如果ajax响应太慢,则会出现一个空白窗口,影响用户体验,所以建议给该新窗口增加提示“正在拼命加载中”,但是我觉得这个并不是最好的解决方案。
//先在ajax函数之前打开新窗口,后再加载url$('#btn').click(function () {//打开一个不被拦截的新窗口var win = window.open();win.document.body.innerHTML="正在拼命加载中......";$.ajax({url: '',success: function (url) {//修改新窗口的urlwin.location.href = url;}});});
方案四、
把ajax异步改成同步,该方法会阻塞浏览器运行导致卡顿,经过测试,就算改成同步,chrome还是会阻拦,Firefox不会阻拦
//先在ajax同步函数之后打开新窗口$('#btn').click(function () {$.ajax({url: '',async: false, // 同步,意味着执行该ajax完成后,后续代码才继续运行success: function (url) {}});//执行完ajax后再打开新窗口window.open("./page/......", "_blank");});
方案五、
把ajax执行完后,弹出一个弹出框提示用户,由用户确认点击打开,这个方法目前感觉是最友好的
$('#btn').click(function () {$.ajax({url: '',success: function (url) {option.open({//type: 1,icon: 3,title: "支付",btn: ['立即查看', '取消'],content: "文件已经校验成功,请查看结果",btn1: function (index) {option.closeAll();window.open("./page/......");},btn2: function (index) {option.closeAll();}});}});});
如果觉得《ie9浏览器两个ajax请求同步不兼容_浏览器拦截问题》对你有帮助,请点赞、收藏,并留下你的观点哦!