【问题标题】:How to monitor html a download event?如何监控html一个下载事件?
【发布时间】:2014-07-22 01:13:55
【问题描述】:

HTML 如下所示:

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

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

JavaScript 看起来像这样:

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

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

【问题讨论】:

标签: javascript html


【解决方案1】:

可能有一种解决方法。 Detecting the File Download Dialog In the Browser

<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

【讨论】:

    猜你喜欢
    • 2017-06-24
    • 2023-04-10
    • 2021-08-25
    • 1970-01-01
    • 2013-10-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-23
    相关资源
    最近更新 更多