正文 

当前位置： 首页 > 问答 >

html5 下载属性的任何后备客户端解决方案？

     2023-02-22     286

关键词：

【中文标题】html5 下载属性的任何后备客户端解决方案？【英文标题】：Any fallback client-side solutions for the html5 download attribute? 【发布时间】：2013-09-10 06:10:33 【问题描述】：

对于不支持 HTML5“下载”属性的浏览器，是否有客户端回退选项？

目前，这仅在 Chrome 中得到适当支持。 Firefox 有支持，但采取了一种迟钝的观点，即它应该只处理来自同一域的文件以解决“安全”问题。

处理此问题的正确方法是使用后端服务器代理请求的带有 Content-Disposition 标头的文件，但在这种情况下，它很可能不是一个选项。

Firefox 的“安全剧院”也不是很有帮助，因为它是设置代理的任意机制。

我在看https://github.com/dcneiner/Downloadify，但刚刚意识到它只支持文件创建，不支持远程文件访问。

【问题讨论】：

好吧，规范说This algorithm is intended to mitigate security dangers involved in downloading files from untrusted sites, and user agents are strongly urged to follow it.，所以我怀疑任何浏览器供应商都会允许下载属性指向另一个来源（域）。 【参考方案1】：

简短的回答：不。除了您已经提到的download 属性之外，没有干净的客户端方法可以做到这一点。发送正确的标头是最好的，但是是一个你可能不想使用的hack：

对于所有带有download 属性的链接（您可以获取带有document.querySelectorAll('a[download]') 的链接），使用XMLHttpRequest 来获取HREF 中提到的URL 处的页面/数据。然后，使用btoa() 函数（或 IE 的 polyfill）将其转换为 base64 字符串。现在将"data:application/octet-stream;base64," 添加到字符串的开头并将其设置为锚的新HREF 属性，然后删除download 属性。 （您可能想先探索浏览器支持，例如 Modernizr）。

我告诉过你你不会喜欢的！

【讨论】：

【参考方案2】：

我写了这个 JS [attrDownloadIE.js]

// author: Carlos Machado
// version: 0.1
// year: 2015
//
var f_name = "";
var f_ref = "";

function reqListener() 
  if(f_name == "") f_name = f_ref;
  var blobObject = this.response;
  window.navigator.msSaveBlob(blobObject, f_name); 


function myDownload(evt) 
  f_name = this.getAttribute("download");
  f_ref = this.getAttribute("href");
  evt.preventDefault();
  var oReq1 = new XMLHttpRequest();
  oReq1.addEventListener("load",reqListener, false);
  oReq1.open("get", this, true);
  oReq1.responseType = 'blob';
  oReq1.send();


document.addEventListener(
  "load",
  function(event)
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if(isIE) 
      var items = document.querySelectorAll('a[download], area[download]');
      for(var i = 0; i < items.length; i++) 
        items[i].addEventListener('click', myDownload, false);
      
    
  
);

【讨论】：

效果很好！我在这里注意到的一件事是，如果我在打开之前设置 responseType，IE 会抛出无效状态错误...

HTML5 本地存储后备解决方案 [关闭]

】HTML5本地存储后备解决方案[关闭]【英文标题】：HTML5LocalStoragefallbacksolutions[closed]【发布时间】：2011-06-0904:47:37【问题描述】：我正在寻找可以在没有本机支持的浏览器上模拟localStorage的javascript库和代码。基本上，我想使用loca... 查看详情

播放带有 HTML5 后备的 FLV 视频

...。但他说他希望FLASH作为第一个选项，如果浏览器（ipad或任何其他）无法识别FLASH，它应该播放我们得到的MP4文件。我建议在Flash上使用HTML5。但他想要的恰恰相反。我怎样才能做到这一点？你们有示 查看详情

html5 音频播放器 flash 后备

】html5音频播放器flash后备【英文标题】：html5audioplayerflashfallback【发布时间】：2012-02-1316:36:14【问题描述】：我需要一个支持播放列表的html5mp3播放器。最重要的是它必须有一个Flash后备来支持firefox，因为我只会使用.mp3作为我的... 查看详情

Android - 视图的后备字体

...西里尔字符的字体（并且他们想要西里尔语言..），因此任何西里尔字符都是漂亮的正方形！我似乎找不到任何东西可以为textview设置后备字体？在iOS中，有一个默认的回退。不要让我失望Android！重新制作一个 查看详情

Java Feign 客户端后备 - 无法调用后备

】JavaFeign客户端后备-无法调用后备【英文标题】：JavaFeignclientFallback-can\'tcallfallback【发布时间】：2020-07-2705:54:27【问题描述】：我正在尝试理解Feign客户端在Java中的工作，并在出现错误时调用Fallback，我遇到了一些困难。我写了... 查看详情

后备图像和超时 - 外部内容。 Javascript

...速的谷歌搜索，发现了这个问题。我想在服务器端做，但客户端听起来更简单。【参考方案1】： 查看详情

html5a标签的download属性(代码片段)

...我们指定浏览器下载时采用新的文件名称，也就是在客户端重命名下载文件。而不是链接上原始的文件名称。添加download属性后，无论a标签的href属性链接到一个网页、图片、文本等，download属性都会强制触发下载操作... 查看详情

HTML5 视频的图像占位符后备

】HTML5视频的图像占位符后备【英文标题】：ImageplaceholderfallbackforHTML5Video【发布时间】：2013-01-1500:05:18【问题描述】：我正在使用以下代码在页面上实现HTML5视频<videoautoplay><sourcesrc="/resources/video/product-hero.mp4.mp4"type=\'video/m... 查看详情

JW Player 嵌入代码的问题 - 带有 HTML5 后备的 Flash

】JWPlayer嵌入代码的问题-带有HTML5后备的Flash【英文标题】：ProblemwithJWPlayerEmbedCode-FlashwithHTML5Fallback【发布时间】：2011-11-0723:57:37【问题描述】：我正在尝试设置我的页面以播放具有以下规格的视频：使用授权的JW播放器要使用Fla... 查看详情

html具有闪回后备的html5视频(代码片段)

查看详情

如何在后备字体的字体定义中添加字体粗细属性？

】如何在后备字体的字体定义中添加字体粗细属性？【英文标题】：Howtoaddfont-weightpropertyinsideafontdefinitionforthefallbackfont?【发布时间】：2017-04-3002:03:36【问题描述】：在我们的项目中，我们使用FiraSansBold来加粗文本段。作为后备... 查看详情

即使浏览器支持 html5 视频，也显示后备图像

】即使浏览器支持html5视频，也显示后备图像【英文标题】：Displayfallbackimageevenifthebrowsersupportshtml5video【发布时间】：2013-03-0803:59:53【问题描述】：这听起来可能很奇怪，但在这种情况下我还能显示后备图片吗？由于移动设备（A... 查看详情

HTML5 多人游戏安全解决方案

】HTML5多人游戏安全解决方案【英文标题】：HTML5MultiplayerGameSecuritySolutions【发布时间】：2011-02-2801:39:45【问题描述】：现在已经有几个HTML5中经典平台甚至3Dfps游戏的简洁画布演示，下一步可能是尝试开发多人HTML5游戏。HTML5套接... 查看详情

为啥我的 HTML5 mp4 视频的 Flash 后备功能不起作用？

】为啥我的HTML5mp4视频的Flash后备功能不起作用？【英文标题】：Whydoesn’tmyFlashfallbackforHTML5mp4videowork?为什么我的HTML5mp4视频的Flash后备功能不起作用？【发布时间】：2014-04-0113:48:22【问题描述】：我有本地html页面(html5)。Html-这是... 查看详情

Firebase 短链接后备链接

...有链接shortener的Firebase动态链接，我想为Android和iOS之外的客户端定义后备链接。Manuallyconstructed动态链接具有参数ofl，这正是我需要的ThelinktoopenonplatformsbesideAndroida 查看详情

HTML5 视频后备 - 无法在本地 Flash 播放器中播放视频文件

】HTML5视频后备-无法在本地Flash播放器中播放视频文件【英文标题】：HTML5videofallback-can\'tplayvideofilesinflashplayerlocally【发布时间】：2013-08-0211:16:53【问题描述】：这里有点问题，我无法理解。我正在创建本质上是一个离线网站，... 查看详情

如何在单个故事中模拟窗口变量

...属性传递来在Storybook中显示它。但这并不总是一个合适的解决方案。所以我想 查看详情

在 ./symbolicatecrash 第 115 行的 macosx SDK 或任何后备 SDK 中找不到名为“otool”的工具

】在./symbolicatecrash第115行的macosxSDK或任何后备SDK中找不到名为“otool”的工具【英文标题】：can\'tfindtoolnamed\'otool\'inthemacosxSDKoranyfallbackSDKsat./symbolicatecrashline115【发布时间】：2016-01-2607:44:43【问题描述】：我尝试使用symbolicatecrash~... 查看详情