SweetAlert2点击确认按钮在新标签页打开外部链接的问题

嘿，我完全懂你碰到的这个IE浏览器的坑！用window.open()确实容易触发IE的弹窗拦截，有时候就算用户手动允许了也会出问题。在SweetAlert2的场景下，有两个更靠谱的方案能解决这个问题：

方案1：用原生<a>标签替代弹窗按钮 #

直接在SweetAlert2的自定义内容里插入一个样式和弹窗按钮一致的链接，用户点击的是原生链接，IE的弹窗拦截机制对这种用户主动触发的跳转宽容度高很多，能正常在新标签页打开。

示例代码：

$(document).ready(function($) {
  // 假设这里是你的页面浏览量判断逻辑
  if (pageViews >= 5) {
    setTimeout(function() {
      Swal.fire({
        title: '愿意参与我们的调查吗？',
        html: '<a href="' + survey_url + '" target="_blank" class="swal2-confirm swal2-styled">是</a>',
        showCancelButton: true,
        cancelButtonText: '否',
        showConfirmButton: false // 隐藏默认的确认按钮
      });
    }, 3000);
  }
});

这里用html选项插入了带SweetAlert2按钮样式的<a>标签，同时隐藏默认确认按钮，视觉上和原弹窗一致，但本质是原生链接，IE能正常处理。

方案2：在确认回调中模拟点击原生链接 #

如果还是想用SweetAlert2的默认按钮样式，可以在confirm回调里创建一个隐藏的<a>标签，模拟用户点击它，这种方式同样能绕过IE的弹窗拦截。

示例代码：

$(document).ready(function($) {
  if (pageViews >= 5) {
    setTimeout(function() {
      Swal.fire({
        title: '愿意参与我们的调查吗？',
        showCancelButton: true,
        confirmButtonText: '是',
        cancelButtonText: '否'
      }).then((result) => {
        if (result.isConfirmed) {
          // 创建隐藏a标签并模拟点击
          const link = document.createElement('a');
          link.href = survey_url;
          link.target = '_blank';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      });
    }, 3000);
  }
});

这个方法的核心是通过用户主动点击弹窗按钮触发跳转，而非直接调用window.open()，IE会把这种操作判定为用户主动交互，不会拦截。

为什么这两个方案更优？ #

IE的弹窗拦截对window.open()限制极严，尤其是定时器里的非用户直接触发调用，很容易被拦截。而原生<a>标签点击或模拟点击的操作，会被浏览器识别为用户主动行为，所以能顺利在新标签页打开链接。

内容的提问来源于stack exchange，提问作者GhitaB