如何实现表单提交在新窗口打开且不触发弹窗拦截？

嘿，我完全懂你现在的困惑——明明是用户主动改了下拉框触发的表单提交，结果还是被Chrome和Firefox的弹窗拦截器给挡了。这事儿其实是浏览器的安全机制在搞鬼，哪怕是用户触发的事件，只要不是最直接的同步交互动作，都有可能被判定为“可疑弹窗”。

下面给你几个不用加白名单就能搞定的方案：

方案1：改用原生DOM操作触发提交 #

有时候jQuery的事件封装会让浏览器的交互判定逻辑“懵圈”，换成原生JS直接操作DOM反而更符合浏览器的可信交互标准：

document.addEventListener('DOMContentLoaded', function() {
  const select = document.querySelector('select');
  select.addEventListener('change', function() {
    this.form.submit(); // 直接调用表单的原生submit方法
  });
});

你的HTML结构不用改，保持原来的target="_blank"就行。这种方式更贴近浏览器对用户直接交互的判定，拦截概率会低很多。

方案2：先开空白窗口再提交表单（最稳妥的方案） #

这个方法是绕开拦截机制的黄金方案——因为我们是在用户交互的同步流程里直接打开空白窗口，浏览器会明确认为这是用户主动触发的操作，绝对不会拦截：

$(function() {
  $('select').change(function() {
    // 第一步：在同步回调里打开空白窗口，保存窗口引用
    const newWin = window.open('', '_blank');
    // 第二步：把表单的target设置为这个新窗口的名称
    const form = $(this).closest('form')[0];
    form.target = newWin.name;
    // 第三步：提交表单
    form.submit();
  });
});

⚠️ 注意：一定要确保打开窗口和提交表单的动作都在change事件的同步回调里，别加任何异步操作（比如AJAX请求），不然还是会触发拦截。

为啥你的原代码会被拦截？ #

虽然change事件是用户触发的，但Chrome和Firefox的新版本对弹窗触发的判定非常严格：只有在用户交互的直接同步执行栈里触发的弹窗/新窗口，才会被认为是可信的。jQuery的submit()方法内部有一些封装和异步调度（哪怕是微任务），可能让浏览器觉得这个提交动作不是用户直接触发的，从而触发拦截。

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