是否可以使用Javascript捕獲瀏覽器的“文件打開/保存”對話框事件

Question

使用Javascript可以偵聽瀏覽器的文件打開/保存對話框事件。 當我收到保存文件對話框已打開的通知時，我想執行一個操作。 具體來說，我想在對話框打開時隱藏加載微調器（但這很可能是其他任何操作）

我相信我可以為自己創建的對話框執行此操作，不確定是否可以針對瀏覽器的標准對話框執行此操作。

對此的任何指示都將非常有幫助。

Answer 1

是! 您可以利用大多數瀏覽器（在Chrome，Firefox和IE上經過測試，可以）在“單個文件下載”對話框打開之前觸發beforeunload事件。

因此，這樣的代碼將起作用：

$(window).bind ("beforeunload",  function (zEvent) {
    // PERFORM DESIRED ACTIONS HERE.
    /* This code will fire just before the Individual-file Download 
       dialog opens.
       Note that it will also fire before the tab or window is closed, 
       but that should not be a problem for this application.
    */
} );

打開並運行此代碼片段，以查看實際效果：

 $(window).bind ("beforeunload", function (zEvent) { $("#dwnldStatus").text ("This code runs just before the file open/save dialog pops up."); } ); $("#directDwnload").click ( function () { fireDownload (); } ); $("#ResetTimer").click ( function () { $("#dwnldStatus").html ( 'Download will start in <span id="timeleft">3</span> seconds.' ); fireTimer (3); } ); function fireDownload () { window.location.assign ( "//phs.googlecode.com/files/Download%20File%20Test.zip" ); } function fireTimer (secondsLeft) { this.secondsLeft = secondsLeft || 30; this.countdownTimer = this.countdownTimer || null; if ( ! this.countdownTimer) { this.countdownTimer = setInterval ( function() { this.secondsLeft--; $("#timeleft").text (this.secondsLeft); if (this.secondsLeft <= 0) { clearInterval (this.countdownTimer); this.countdownTimer = null; fireDownload (); } }, 1000 ); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <p>Activate one of the download buttons. The timer button is just like any other javascript initiated download, no additional click is needed.</p> <p>The javascript detects when the File/Save dialog pops up and changes the status to "This code runs just before the file open/save dialog pops up.".</p> <p>Note that it is not necessary to download the file. You can cancel the download.</p> <div id="dwnldStatus"></div> <button id="ResetTimer">Set timer to 3 seconds.</button> <button id="directDwnload">Download the file now.</button> 

---

請注意，在關閉選項卡或窗口之前，也會觸發beforeunload ，因此請進行相應的計划。 如前所述，這應該不是這個問題的問題。

Answer 2

不，沒有任何活動。

Answer 3

觀察所有可以調用文件對話框的元素。

例如，處理<input type="file" />元素上的單擊事件。 就像是：

$('input:file').click(function(){ // onclick of file input
    $('.spinner').hide(); // hide spinner
});