通过 iframe 下载文件时检测 iframe 负载答案

【问题标题】：Detecting iframe load when downloading a file through the iframe通过 iframe 下载文件时检测 iframe 负载
【发布时间】：2015-01-02 13:16:06
【问题描述】：

我正在使用 AngularJS 并在 iframe 上设置 ngSrc，我用它来下载压缩存档以解决无法使用 AJAX 下载文件的问题。我正在使用一个指令来检测我发现here 的 iframe 负载，当您加载像“about:blank”这样的 URL 时，它工作得很好，但是当我用 RESTful 调用它时它没有负载下载文件，即使它下载了生成的文件。

// Markup of iframe using ngSrc and custom directive
<iframe ng-src="{{url}}" style="display:none;" iframe-onload="myCallback" />

// Controller setting iFrame, what I'd like to trigger the load
$scope.downloadArchive = function( id ) { // no load event? but downloads zip archive

    var url = '/data/archive/instance/' + id;
    $scope.url = $sce.trustAsResourceUrl( url );
}

// Controller setting iFrame, what does trigger the load
$scope.downloadArchive = function( id ) { // load event triggered

    $scope.url = $sce.trustAsResourceUrl('about:blank');
}

通过 iframe 下载压缩存档时是否可以检测到事件？

【问题讨论】：

标签： javascript jquery html angularjs iframe

【解决方案1】：

是不是因为浏览器限制不能通过 AJAX 下载文件？像跨域问题？您可以通过检查 Chrome 控制台中的错误来找出答案。

如果是这种情况，由于现代浏览器的限制，您将无法在 iframe 中查看文件的内容。想想如果允许开发人员访问任何 iframe 的内容会发生什么。我可以在 iframe 中使用您银行的网站制作网站。一旦您登录，我就可以从 iframe 监听表单提交事件，然后获取您的登录凭据。

因此，可能发生的情况是您的 iframe 正在加载文件，试图在其中显示文件，但出于安全考虑故意阻止您查看其内容。

我建议通过您拥有的代理服务器或云服务下载文件，然后从您自己的服务器上提供文件。这可以避免跨域问题，因为您现在可以 ping 自己的服务器。

【讨论】：

zip 文件实际上下载没有问题，但我无法检测到是否有，iframe 加载事件不会触发。需要知道它何时下载，以便我可以将 iframe url 重置为“about:blank”或其他，否则如果需要，我无法下载该文件的第二个副本，需要先将 URL 重置为其他内容。

【解决方案2】：

我最终没有尝试每次都重置 URL，只是将当前时间作为第二个参数附加，服务器会忽略该参数。现在看起来 iframe 正在重新加载一个新的 URL。

var url = '/data/archive/instance/' + id + '/' + Date.now();

【讨论】：