【JS 】下载 弹框被拦截解决方案

最新解决方案:
新打开页面, 在设置地址, 这样就不存在问题

var newTab = window.open('about:blank')
newTab.location.href = url;

Paste_Image.png

总结[方法还是存在问题]

  1. 早期下载的简单用法 : window.open(downloadUrl)
  2. 下载弹框会被拦截, 解决方案是使用 form 来实现
//Jquery 版, 多次下载防止,添加多个 form
if ($('#_downloadWin').length > 0) {       
      $('#_downloadWin').attr('action', url);  
      $('#_downloadWin input').val(path);} 
else {  
      // 传参 则在 form 里面 添加 隐藏域(<input type="hidden"/>)
      $('body').append($(`<form id="_downloadWin" action="${url}" target="_blank" method="get"><input name="path"  type="hidden" value="${path}" /></form>`));
}
$('#_downloadWin').submit();
//JavaScript版
var f = document.createElement("form");
document.body.appendChild(f);
var i = document.createElement("input");
i.type = "hidden";
f.appendChild(i);
i.value = "5";
i.name = "price";
f.action = "aa.asp";  //下载的url 地址
f.submit();

问题描述与解决方案

早期下载文件的时候,是直接使用 window.open(downloadUrl) 这种简单粗暴的方法来实现的.

但是到目前(2016.05.17), window.open 已经被大部分的主流浏览器给拦截了, 如下图, 需要人工在点击一次允许打开链接. 这样大大的降低了 友好的交互.

Paste_Image.png

于是需要寻找新的解决方案, 就使用 form 表单元素来进行下载, 注意 Form 表单的 target 要设置为 _blank 在新的窗口打开,这样就不会影响本页面*

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 910评论 0 0
  • 第一部分 准入训练 第1章 进入忍者世界 js开发人员通常使用js库来实现通用和可重用的功能。这些库需要简单易用,...
    如201608阅读 1,376评论 1 2
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,769评论 18 399
  • 9.19--9.23 第7章 正则表达式 正则表达式是一个拆分字符串并查询相关信息的过程。 推荐练习网站: js ...
    如201608阅读 1,071评论 0 4
  • “朝朝暮暮让你猜想如何驯服我”一言点破了情感关系中的一个法则:保持新鲜感。倘若一个男人若是看懂了一个女人,那么这个...
    小师hd阅读 393评论 0 0