Question

我正在制作一个供人们下载的常用程序的HTML表，例如一对夫妇的Chrome和Dropbox，作为一种快速而有用的门户。单击ASP.NET下载ImageButton时，我具有一个JavaScript函数，该函数使XMLHttpRequest监视.exe的下载进度并提供状态消息。我从ASP.NET OnClientClick的{{1}}属性调用JavaScript函数，然后C＃背后的代码执行从ImageButton的实际下载。下载进度条和状态消息在Chrome中可以正常工作，但在Firefox中不能正常工作。该表位于URL https://maxstechandmathsite.azurewebsites.net/Random上。上次检查时，Firefox确实支持XMLHttpRequests。

我尝试使用锚点（OnClick）标签，其中a作为下载URL，href作为JavaScript函数代替了ImageButton和C＃下载代码，但是仍然显示下载弹出窗口，但没有进度或消息出现在我的页面上。

HTML：

onclick

JavaScript：

    <table>
       <tr>
          <td style="padding-left: 5px; padding-right: 5px"><asp:ImageButton ID="ImageButton7" runat="server" OnClientClick="return Download('Executables/readerdc_en_ka_cra_install.exe', 'ImageButton7', 'Loading3', '#save-file3', '#progressBar3', 'result4', 'blob');" UseSubmitBehavior="false" ImageUrl="~/Images/DownloadButton.PNG" Height="38px" OnCommand="GetFileEXE" CommandArgument="Executables/readerdc_en_ka_cra_install.exe" /><button class="buttonload" id="Loading3"><i class="fa fa-circle-o-notch fa-spin"></i> Loading</button></td>
          <td style="padding-left: 5px; padding-right: 5px"><div id="progressBar3" class="progressBar"><div></div></div></td>
          <td style="padding-left: 5px; padding-right: 5px"><p id="result4">Message: </p></td>
          <td><a id="save-file3" href="#">Save to PC</a>&nbsp;<div class="g-savetodrive" data-src="Executables/readerdc_en_ka_cra_install.exe" data-filename="Adobe Acrobat Reader DC" data-sitename="Max's Tech and Math Site"></div></td>
       </tr>
    </table>

C＃（此代码不应该成为问题）：

    <script>
        function progress(percent, $element) {
            var progressBarWidth = percent * $element.width() / 100;
            //$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
            $element.find('div').animate({ width: progressBarWidth }, 100).html(percent + "%&nbsp;");
        }

        function Download(file_name, download_button, load_button, save_link, progress_bar, result, response_type) {
                var request = new XMLHttpRequest();
                request.addEventListener('readystatechange', function (e) {
                if (request.readyState === 2 && request.status === 200) {
                    // Download is being started
                    document.getElementById(download_button).style = "display: none; visibility: hidden";
                    document.getElementById(load_button).style = "display: block; visibility: visible";
                }
                else if (request.readyState === 3) {
                    // Download is under progress
                }
                else if (request.readyState === 4) {
                    // Downloading has finished
                    document.getElementById(download_button).style = "display: block; height: 38px; visibility: visible";
                    document.getElementById(load_button).style = "display: none; visibility: hidden";
                    document.querySelector(save_link).setAttribute('href', _OBJECT_URL);
                    document.querySelector(save_link).setAttribute('download', file_name);
                    _OBJECT_URL = URL.createObjectURL(request.response);
                    // Recommended : Revoke the object URL after some time to free up resources
                    // There is no way to find out whether user finished downloading
                    setTimeout(function () {
                        window.URL.revokeObjectURL(_OBJECT_URL);
                    }, 60 * 1000);
                }
            });
            request.addEventListener("progress", function (e) {
                if (e.lengthComputable) {
                    var percent_complete = (e.loaded / e.total) * 100;
                    progress(percent_complete, $(progress_bar));
                }
                else {
                    document.getElementById(result).innerHTML += "Length of file is not computable.";
                }
            });
            request.addEventListener("load", transferComplete);
            request.addEventListener("error", transferFailed);
            request.addEventListener("abort", transferCanceled);
            request.open('get', file_name);
            request.responseType = response_type;
            request.send();
            function transferComplete(evt) {
                document.getElementById(result).innerHTML += "The transfer is complete.";
            }

            function transferFailed(evt) {
                document.getElementById(result).innerHTML += "An error occurred while transferring the file.";
            }

            function transferCanceled(evt) {
                document.getElementById(result).innerHTML += "The transfer has been canceled by the user.";
            }
            return true;
        }
     </script>

Answer 1

所以，让我们这样说吧...我有点想出了我的问题。在我的JavaScript函数的最后，我有return true;，应该在return false;位置，以防止在ASP.NET Web表单中进行回发-在放置{{1时，可以防止回发/提交行为}}关键字，然后单击按钮，然后在函数底部放置return。当我将其设置为return false;时，该页面实际上并未重新加载，而是跳过了JavaScript并直接跳至C＃，要求用户打开或保存文件。将return true设置为return时，仍然没有按预期方式提交表单，但是下载进度和状态消息实际上可以在Firefox上使用。幸运的是，我可以进行2换2的操作，因为在表的每一行中，我还有一个“将文件保存到PC”链接作为选项之一，因此用户可以通过这种方式下载程序。但是，我不会认为这种情况已经解决，因为我只是在问题的上下文中进行了1比2（JavaScript工作和通过C＃工作的实际下载）工作。

为什么单击下载按钮后Firefox无法执行JavaScript代码？

1 个答案: