在瀏覽器背景中加載下載，告訴完成

Question

我想要一個文件，需要在後臺加載好幾秒鐘，所以我可以同時顯示一個微調。

我目前正在嘗試在背景中使用iframe，並且這種方法有效，但我不知道如何在加載完成後通知我（我可以移除微調器）。

這樣做的好方法？任何比iframe更好的解決方案？

這裏是我到目前爲止的代碼：

<script> 
    $(document).ready(function() { 
     var link = $('.generate-pdf'); 

     link.click(function(e) { 
      e.preventDefault(); 
      var spinner = $("<img src='/assets/images/ajax-loader.gif' />"); 
      var iframe = $('<iframe src="' + link.attr('href') + '" style="height:0;width:0;visibility;hidden;display:none;"></iframe>'); 
      link.before(spinner); 
      link.before(iframe); 

     }); 
    }) 
</script> 

據this site，因爲我Content-disposition是attachment我不能保證收到任何事件。我可以輪詢iframe上的任何屬性以找出問題嗎？

Answer 1

你試過

iframe.load(function(){ 
    log("done"); 
}) 

Answer 2

最後，我不得不由服務器進行聯繫，如果該文件已被髮送到瀏覽器看到的做到這一點。我仍然希望看到一個純粹的基於客戶端的實現。

謝天謝地，下載是用PHP生成的，所以這沒問題。

<script> 
    $(document).ready(function() { 
     var link = $('.generate-pdf'); 

     link.click(function(e) { 
      e.preventDefault(); 
      var spinner = $("<div class='spinner'><img src='/assets/images/ajax-loader.gif' /><span>Your PDF is being generated...</span></div>"); 
      var downloadKey = new Date().getTime(); 
      var iframe = $('<iframe src="' + link.attr('href') + '&downloadKey='+downloadKey+'" style="height:0;width:0;visibility;hidden;display:none;" onload="alert(\'hello\')"></iframe>'); 
      link.before(spinner); 
      link.before(iframe); 

      var hasFinished = function(downloadKey, callback) { 
       var that = this; 
       $.ajax({ 
        url: "index.php?controller=is-download-finished&downloadKey=" + downloadKey, 
        success: function(data) { 
         if (data) { 
          callback(); 
         } else { 
          setTimeout(function() { 
           that(downloadKey, callback); 
          }, 1000); 
         } 
        } 
       }) 
      }; 
      hasFinished(downloadKey, function() { 
       spinner.remove(); 
       iframe.remove(); 
      }); 

     }); 
    }) 
</script> 

額外的請求只是返回JSON true或false。