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

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

目录
相关文章
|
3天前
Jsoup获取url所有链接
Jsoup获取url所有链接
7 1
|
9天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
JS 监听用户页面访问&页面关闭操作并进行数据上报 第一次进入页面时触发页面访问 刷新当前页面时触发页面访问 新 tab 进入页面时触发页面访问 当前页面点击 nav 进入其他模块时,触发页面关闭&页面访问 关闭页面时触发页面关闭
14 0
|
11天前
|
Windows
iis配置http重定向302转发get请求并去掉最后的斜杠/ iis重定向 iis去除url最后的斜杠 iis重定向链接斜杠(已解决)
iis配置http重定向302转发get请求并去掉最后的斜杠/ iis重定向 iis去除url最后的斜杠 iis重定向链接斜杠(已解决)
|
11天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的星空游戏购买下载平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的星空游戏购买下载平台附带文章和源代码部署视频讲解等
12 1
|
12天前
|
JavaScript 前端开发 API
详解JS的URL()和URLSearchParams() API接口
详解JS的URL()和URLSearchParams() API接口
14 2
|
20天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
|
29天前
|
前端开发 JavaScript
前端 JS 经典:文件流下载
前端 JS 经典:文件流下载
42 0
|
1月前
|
JavaScript 前端开发
JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束
【5月更文挑战第13天】JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束。在游戏开发中,闭包常用于创建独立状态的角色实例。例如,`createCharacter`函数生成角色,内部函数(如`getHealth`、`setHealth`)形成闭包,保存角色的属性(如生命值)。这样,每个角色实例都有自己的变量副本,不互相影响,从而实现角色系统的独立性。
25 0
|
1月前
|
移动开发 资源调度 前端开发
nbcio-vue下载安装后运行报错,diagram-js没有安装
nbcio-vue下载安装后运行报错,diagram-js没有安装
17 0
|
1月前
浏览器兼容性解决方案
【5月更文挑战第4天】浏览器兼容性解决方案。
15 5