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

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

目录
相关文章
|
存储 前端开发 Java
SpringBoot使用云端资源url下载文件的接口写法
在Spring Boot中实现从云端资源URL下载文件的功能可通过定义REST接口完成。示例代码展示了一个`FileDownloadController`,它包含使用`@GetMapping`注解的方法`downloadFile`,此方法接收URL参数,利用`RestTemplate`下载文件,并将文件字节数组封装为`ByteArrayResource`返回给客户端。此外,通过设置HTTP响应头,确保文件以附件形式下载。这种方法适用于从AWS S3或Google Cloud Storage等云服务下载文件。
1494 7
|
机器学习/深度学习 存储 算法
基于 C++ 布隆过滤器算法的局域网上网行为控制:URL 访问过滤的高效实现研究
本文探讨了一种基于布隆过滤器的局域网上网行为控制方法,旨在解决传统黑白名单机制在处理海量URL数据时存储与查询效率低的问题。通过C++实现URL访问过滤功能,实验表明该方法可将内存占用降至传统方案的八分之一,查询速度提升约40%,假阳性率可控。研究为优化企业网络管理提供了新思路,并提出结合机器学习、改进哈希函数及分布式协同等未来优化方向。
431 0
|
PHP Apache
【ThinkPHP框架教程·Part-04】URL访问模式
本章节介绍 ThinkPHP6.0 的 URL 访问模式,解析其访问方法。ThinkPHP 框架通过 URL 实现多种操作,默认为单应用模式。
【ThinkPHP框架教程·Part-04】URL访问模式
|
存储 Java API
在springboot中缩短一个url链接
URL缩短服务是现代应用中常见的需求,用于将长URL映射为简短的唯一代码,便于分享。该服务具备多种功能,如自动过期、访问统计、防止重复及安全机制。通过Spring Boot构建RESTful API,使用H2数据库存储数据,Java UUID生成短码,并通过定时任务清理过期URL。用户可通过API提交长URL获取短链接,查询访问量,系统会自动重定向并记录访问次数。每天午夜自动清理过期URL,确保数据整洁。此项目结构清晰,涵盖实体类、Repository、Service和Controller等核心组件,适合快速开发和扩展。
464 2
|
Java
Java通过HttpClient从外部url下载文件到本地
该Java程序旨在通过URL将外部网络文件(如图片)下载至本地,并解决防盗链问题。首先,它通过`HttpGet`请求获取远程文件,并通过设置`Referer`头防止防盗链。然后,根据响应内容类型确定文件后缀并保存至指定路径。测试表明,程序能够成功下载文件。
1793 8
Java通过HttpClient从外部url下载文件到本地
|
JavaScript Linux 应用服务中间件
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
【Azure 应用服务】FTP 部署 Vue 生成的静态文件至 Linux App Service 后,访问App Service URL依旧显示Azure默认页面问题
389 1
|
网络协议
【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)
【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)
396 0
|
开发工具 git
IDEA中怎么使用git下载项目到本地,通过URL克隆项目(giteegithub)
IDEA中怎么使用git下载项目到本地,通过URL克隆项目(giteegithub)
3285 0
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
240 0
|
JavaScript
js 下载文件(根据URL下载文件,根据URL下载图片)
js 下载文件(根据URL下载文件,根据URL下载图片)
1880 0