window.open(url)多次打开下载链接被浏览器拦截问题解决方案,js实现循环访问多个下载链接

简介: window.open(url)多次打开下载链接被浏览器拦截问题解决方案,js实现循环访问多个下载链接

背景


项目背景就是用户存在多个数据链接,想要通过前端js点击一次下载就将这几个数据都下载下来。


起初设计代码:

//len为urllist中链接个数
//urlspec为另外独特的一种数据链接
for (var i = 0; i < len; i++) {
    window.open("" + urllist[i]);
}
return window.open("" + urlspec);

运行后下载数据,发现仅下载了urlspec的数据,其他的被浏览器拦截了,需要用户自己手动允许才开始下载。


原因和尝试


检索后了解:某些浏览器(比如Chrome)出于安全和体验的考虑,会禁止直接在JS中使用 window.open(url) 打开新的窗口。但是如果使用 window.open(url,'_self') 改变当前窗口是允许的。

禁止直接打开的原因就是非用户操作产生的新弹出窗口,会被认为这可能是一个广告,所以禁止了这种行为。但是在开发的时候, 有时候又的确存在需要使用的场景。从浏览器客户端来看,可以在浏览器客户端设置, 但是这种方式只能临时或单个机器解决。


网上总结主要的解决方法:1、使用表单提交方式;2、使用标签 或是按钮的onclick 事件;3、延迟打开;4、先打开页面, 再更改地址;5、先弹出窗口,然后重定向等等。具体的相关内部实现案例参考:window.open(url)打开链接被浏览器拦截解决方案 - 走看看 (zoukankan.com)和window.open被浏览器拦截的解决方案_XiaoHuBeiPlus的博客-CSDN博客

image.png

尝试用这些方法解决:均不能实现

1、使用标签 或是按钮的onclick 事件(仍有拦截

for (var i = 0; i < len; i++) {
    var a = document.createElement('a');
    a.setAttribute('href', urllist[i]);
    a.setAttribute('style', 'display:none');
    a.setAttribute('target', '_blank');
    document.body.appendChild(a);
    a.click();
    a.parentNode.removeChild(a);//依旧不行,还会被拦截
}
return window.open("" + urlspec);

2、使用延时(没有下载

for (var i = 0; i < len; i++) {
    setTimeout('window.open("" + urllist[i]);',1000);//该方法不行,直接无下载
}
return window.open("" + urlspec);


解决方法


最后检索了解到多个url文件下载文章中使用的iframe就可以实现这样的场景:

1.var count=0;
for (var i = 0; i < len; i++) {
  var hiddenIFrameID = 'hiddenDownloader' + count++;
  var iframe = document.createElement('iframe');
  iframe.id = hiddenIFrameID;
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  iframe.src = urllist[i];//直接下载,不会弹出新的页面
}
return window.open("" + urlspec);

image.png

这样就解决了以上问题,大家在实际使用中还是需要根据自己项目功能需要采用自己最简单的解决方法。

目录
相关文章
|
9月前
|
Web App开发 存储 数据处理
Chrome 下载大文件报错!用 Streamsaver.js 完美填坑
本文探讨了Chrome下载大文件报“网络错误”的原因及解决方案。由于Chrome对Blob数据有大小限制,导致大文件下载失败。通过将responseType改为ArrayBuffer可临时解决1-2G文件问题,但超3G仍会崩溃。最佳方案是使用Streamsaver.js实现流式下载,边接收边保存,避免内存溢出,完美支持超大文件下载。
4883 3
|
9月前
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
609 0
Apple Safari 26.0.1 发布 - macOS 专属浏览器 (独立安装包下载)
|
10月前
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
864 0
|
机器学习/深度学习 人工智能 文字识别
浏览器AI模型插件下载,支持chatgpt、claude、grok、gemini、DeepSeek等顶尖AI模型!
极客侧边栏是一款浏览器插件,集成ChatGPT、Claude、Grok、Gemini等全球顶尖AI模型,支持网页提问、文档分析、图片生成、智能截图、内容总结等功能。无需切换页面,办公写作效率倍增。内置书签云同步与智能整理功能,管理更高效。跨平台使用,安全便捷,是AI时代必备工具!
911 8
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
949 4
Apple Safari 18.5 - macOS 专属浏览器 (独立安装包下载)
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 18.4 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 18.4 - macOS 专属浏览器 (独立安装包下载)
732 3
Apple Safari 18.4 - macOS 专属浏览器 (独立安装包下载)
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
715 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
机器学习/深度学习 存储 算法
基于 C++ 布隆过滤器算法的局域网上网行为控制:URL 访问过滤的高效实现研究
本文探讨了一种基于布隆过滤器的局域网上网行为控制方法,旨在解决传统黑白名单机制在处理海量URL数据时存储与查询效率低的问题。通过C++实现URL访问过滤功能,实验表明该方法可将内存占用降至传统方案的八分之一,查询速度提升约40%,假阳性率可控。研究为优化企业网络管理提供了新思路,并提出结合机器学习、改进哈希函数及分布式协同等未来优化方向。
357 0
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1267 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布