JS实现多选下拉框选中PDF批量打开仅第一个生效如何解决

问题根因 #

• 核心原因是浏览器的弹窗拦截策略：默认情况下，浏览器仅允许在单次用户交互事件（比如点击按钮）中触发1个window.open调用，后续的批量调用会被判定为恶意弹窗直接拦截，因此只有第一个PDF能正常打开。
• 次要排查点：你下拉列表的第一个选项value为空，若选中该选项会触发无效的window.open调用，也可能干扰正常逻辑。

修复方案 #

我们可以通过过滤无效值+模拟a标签点击+短间隔调用的方式降低被拦截的概率，修改后的代码如下：

function yrCall(){
  const selected = document.querySelectorAll('#YRcollection option:checked');
  // 先过滤掉空value的无效选项
  const valuey = Array.from(selected).map(el => el.value).filter(val => val.trim() !== '');
  // 间隔300ms依次打开，避免被浏览器判定为恶意批量弹窗
  valuey.forEach((url, index) => {
    setTimeout(() => {
      // 用a标签模拟点击，比直接调用window.open被拦截的概率更低
      const a = document.createElement('a');
      a.href = url;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }, index * 300);
  });
}

额外说明 #

如果修改后仍有部分弹窗被拦截，只需引导用户在浏览器地址栏的弹窗拦截提示中，手动允许当前网站的弹窗权限，即可正常打开所有选中的PDF文件。

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