Jquery 单击链接时显示进度指示器

我的页面中有html链接

 <a id="myDownLoadlink" data-bind="attr: { href: uRlPath }" style="visibility: hidden">Get data file</a>

---

若我可以使用Ajax调用，那个么显示进度条可能会很容易，但在我的情况下，由于某些原因，我不能这样做。如果有什么办法，请告诉我。

鉴于您有服务器访问权限，您可以尝试这样做。 一点解释。您应该在iFrame中加载下载链接。下载将开始，但由于当加载的url是附件时，浏览器不会给出onload回调，因此我们需要一个服务器解决方案

解决方法将需要您向后端发送令牌。然后，当您发送回文件时，您必须使用此响应将客户端的cookie设置为该值

cookie参数应称为downloadtoken。如果设置了此cookie，代码将每200秒检查一次。这将仅在页面加载完成时设置，也就是当您的文件处于中时

玩得开心

function getCookie( name ) {
    var parts = document.cookie.split(name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
}

function expireCookie( cName ) {
    document.cookie = 
      encodeURIComponent( cName ) +
      "=deleted; expires=" +
      new Date( 0 ).toUTCString();
}



var downloadFile = function(url,completeCallback){
    var downloadToken = new Date().getTime();
    iframe  = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);



    iframe.src = url + '&downloadtoken=' +downloadToken;

    var checkServerFeedback = function(){
        var outcome = getCookie('downloadtoken');
        if(downloadtoken == outcome){
            expireCookie('downloadtoken');
            completeCallback();
        }
        setTimeout(checkServerFeedback,200);
    };
    setTimeout(checkServerFeedback,200);
};



/**
    Start of app code
**/
console.log('Add loader here');
downloadFile('http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip',function(){
    console.log('The file has been downloaded remove loader here.');
});

---

除非使用Ajax，否则无法控制页面加载。浏览器只是加载一个新页面，旧页面被忽略/丢弃。唯一的解决方案是使用Ajax调用（这样您就可以进行进度、转换等）。@TrueBlueAussie除了Ajax就没有其他方法了吗？应该有办法。过去我们没有阿贾克斯。请检查是否可以做些什么。我真的需要它。我将非常感谢你在“过去”没有Ajax你也无法做到这一点。Ajax已经存在很长时间了。为什么不能使用Ajax/jQuery/Javascript？@TrueBlueAussie那么你说这是不可能的，你应该询问文件损坏，因为你没有正确设置请求或响应。Ajax不会无缘无故地损坏数据！：）我不明白我应该从服务中返回什么，以及我需要向后端发送什么。如果你看到我的url，我会发送两个参数。你的意思是我送更多的东西吗？我将响应作为HttpResponseMessage.iframe.src=url+'&downloadtoken='+downloadtoken；是将令牌发送到后端的东西，您应该在后端读取此令牌。并将其设置为cookie。但从后端返回HttpResponseMessage，那么如何将其设置为cookie呢？您有这样的例子吗？后端的工作方式是您的语言/框架所独有的。这不是一个复制粘贴解决方案。这是网络开发的最基本原则之一，在谷歌上很容易找到。很高兴我不能提供一个例子阅读我的评论，这完全取决于你的语言/框架。

function getCookie( name ) {
    var parts = document.cookie.split(name + "=");
    if (parts.length == 2) return parts.pop().split(";").shift();
}

function expireCookie( cName ) {
    document.cookie = 
      encodeURIComponent( cName ) +
      "=deleted; expires=" +
      new Date( 0 ).toUTCString();
}



var downloadFile = function(url,completeCallback){
    var downloadToken = new Date().getTime();
    iframe  = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);



    iframe.src = url + '&downloadtoken=' +downloadToken;

    var checkServerFeedback = function(){
        var outcome = getCookie('downloadtoken');
        if(downloadtoken == outcome){
            expireCookie('downloadtoken');
            completeCallback();
        }
        setTimeout(checkServerFeedback,200);
    };
    setTimeout(checkServerFeedback,200);
};



/**
    Start of app code
**/
console.log('Add loader here');
downloadFile('http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.2.0.zip',function(){
    console.log('The file has been downloaded remove loader here.');
});