项目需求要在新窗口打开链接,但被拦截了
1.问题
- 需要在ajax回调中在新窗口打开页面
- 在浏览器开启拦截弹窗时,
window.open(src, "_blank");
这个会被拦截
2.发现
-
浏览器会拦截所有非用户触发的新窗口打开页面(js的跳转)
-
判断浏览器是否打开新窗口的代码
不兼容
- js代码
var flag = false; try{ var winSrc = window.open("https://www.csdn.net/","_blank"); if(winSrc == null){ flag = true; } }catch(e){ flag = true; } if(flag){ console.log("window.open()为null") }
- 检验效果
- pc端,检测了几个浏览器,都是ok的
- 苹果端,用这个判断是ok的
- 安卓端,会显示被拦截,但是flag为false,winSrc不为null
-
延迟这个打开操作
无效
setTimeout('window.open(url);', 500); // 延迟时间不能太短 否则也会被拦截
3.解决办法
- 弹窗,按钮使用a标签,在新窗口打开页面
不区分浏览器,需要在ajax回调中在新窗口打开页面时,都弹出一个弹窗(包含a标签按钮),修改a标签的src,引导用户点击按钮,实现防止浏览器拦截新窗口弹窗的功能
4.例子
- html代码
<div class="pop">
<div class="box">
<p class="text01">订单创建成功</p>
<p class="text02">
请前往订单页面查看信息
</p>
<div class="boxBtn">
<a class="boxBtnCheck" target="_blank" href="">查看订单</a>
</div>
</div>
</div>
- js代码
//ajax回调中使用
$('.boxBtnCheck').attr('href', res.data)
$('.pop').show()
//兼容的弹窗 关闭
$('.boxBtnCheck').click(function () {
$('.pop').hide()
});