如何監控html下載事件？

的HTML看起來像這樣：如何監控html下載事件？

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

我要顯示在頁面上加載圖標，文件開始下載後，將其隱藏。

中的JavaScript看起來像這樣：

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

是否有被觸發下載開始時，無論如何？謝謝！

來源

2014-07-22 linjunhalida

對於「下載」鏈接本身'onClick'呢？ –

http://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download和http://stackoverflow.com/questions/2343418/browser-event-when-downloaded-file-is-saved -to-disk和http://stackoverflow.com/questions/19041447/ajax-file-download-progress-event-for-download可能與此有關（儘管它們不是重複的）。如果你想跟蹤下載何時完成，你可能需要重新編碼你的代碼，但是「onclick」通常應該足夠了（儘管你不一定知道用戶是否開始下載，所以idk）。 – mechalynx

@ PM77-1它有幾秒鐘纔開始下載，所以它不是一個好主意.. – linjunhalida

可能有一種可能的解決方法。 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。

來源

2014-07-22 01:57:42

如何監控html下載事件？

回答

相關問題