js防止浏览器拦截新窗口弹出

项目需求要在新窗口打开链接，但被拦截了

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()
});

5.参考文章

• JS检测浏览器弹出窗口是否被屏蔽
• window.open(url)打开链接被浏览器拦截解决方案