是否可以使用 Javascript 捕获浏览器的文件打开/保存对话框事件

Is it possible to catch browser's File Open/Save dialog event using Javascript

提问by lazy functor

Using Javascript is it possible to listen for browser's file open/save dialog box event. I want to perform an action when I am notified that the save file dialog box has opened now. Specifically I want to hide a loading spinner when dialog box opens (but this could very well be any other action )

使用 Javascript 可以监听浏览器的文件打开/保存对话框事件。当我收到保存文件对话框现在已打开的通知时，我想执行一个操作。具体来说，我想在对话框打开时隐藏加载微调器（但这很可能是任何其他操作）

I believe I can do that for a dialog box that I create, not sure if it can be done for the browser's standard dialog box.

我相信我可以为我创建的对话框做到这一点，不确定是否可以为浏览器的标准对话框做到这一点。

Any pointers for that would be really helpful.

任何有关这方面的指示都会非常有帮助。

采纳答案by Matthew Flaschen

No, there is no event for that.

不，没有针对此的事件。

回答by Brock Adams

Yes! You can take advantage that most browsers (Tested okay on Chrome, Firefox, and IE) fire the beforeunloadevent just before the Individual-file Download dialog opens.

是的！您可以利用大多数浏览器（在 Chrome、Firefox 和 IE 上测试正常）beforeunload在“个人文件下载”对话框打开之前触发事件。

So code like this will work:

所以像这样的代码将起作用：

$(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.
    */
} );

Open and run this snippet to see it in action:

打开并运行此代码段以查看其运行情况：

$(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>

---

---

Note that beforeunloadwill also fire before the tab or window is closed, so plan accordingly. That should not be an issue for this question as stated.

请注意，它beforeunload也会在选项卡或窗口关闭之前触发，因此请相应地进行计划。如上所述，这不应该是这个问题的问题。

回答by Josiah Ruddell

Watch all elements that can invoke the file dialog.

观察所有可以调用文件对话框的元素。

For example, handle click events on <input type="file" />elements. something like:

例如，处理<input type="file" />元素上的点击事件。就像是：

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