如何监控html下载事件

How to monitor html a download event?

本文关键字：html 下载 事件 监控 何监控      更新时间：2023-09-26

HTML是这样的:

<a href="http://example.com/file.pdf" download>Download</a>

我想在页面上显示一个加载图标，并在文件开始下载后隐藏它。

JavaScript是这样的:

$.fancybox.showLoading();
// after download started
when_download_started( function(){
    $.fancybox.hideLoading();
});

下载开始时是否触发了任何事件?谢谢!

可能有一个解决方法。在浏览器中检测文件下载对话框

<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.0.0/resources/css/ext-all.css" />    
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/adapter/ext/ext-base.js" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.0.0/ext-all.js" />
Javascript 

Ext.onReady(function(){
    Ext.get('submit').on('click', function(e){
        Ext.MessageBox.show({
           title: 'Saving',
           msg: 'Please Wait...',
           buttons: Ext.Msg.OK,
           progressText: 'Saving the file...',
           width:350,
           wait:true,
           waitConfig: {duration:2000,interval:200,increment:20},
           icon:'Ext.MessageBox.INFO', //custom class in msg-box.html
           animEl: 'Submit'
       });
        setTimeout(function(){
            Ext.MessageBox.hide();
            Ext.example.msg('Done', 'The file download starts');
        }, 8000);       
    });
});
CSS 

/*message box */
.messagebox{position:relative;width:auto;margin-left:30px;border:1px solid #c93;background:#ffc;padding:3px;font-weight:normal;color:#0000FF; font-stretch:condensed; font-size:xx-small;}
.messageboxok{position:relative;width:auto;margin-left:30px;border:1px solid #349534;background:#C9FFCA;padding:3px;font-weight:bold;color:#008000; font-stretch:condensed; font-size:xx-small;}
.messageboxerror{position:relative;width:auto;margin-left:30px;border:1px solid #CC0000;background:#F7CBCA;padding:3px;font-weight:bold;color:#CC0000; font-stretch:condensed; font-size:xx-small;}

你可以了解更多关于EXTJS。

相关文章：