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

Posted zhongxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 下载 弹框被拦截解决方案相关的知识,希望对你有一定的参考价值。

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* 在新的窗口打开,这样就不会影响本页面

以上是关于JS 下载 弹框被拦截解决方案的主要内容,如果未能解决你的问题,请参考以下文章

xml Elimina archivos js y css aunapáginaespecificadel cms。 Elcódigidebeser agregado en CMS

xml Agrega archivos js y css aunapáginaespecificadel cms。 Elcódigidebeser agregado en CMS

[JavaScript] +function(){} 作用

React onPaste 获取粘贴板的值

sql Actualizacióndeladescripcióndeestructura paralasecciónderegistro de calificacione

sql Insercióndesección'CapturaCalificacionesEducaciónConcontinua'enCat_Bitaco