32

その場で Iframe を作成し、バイナリ ファイル (xls、doc...) をダウンロードするページを URL として設定します。ファイルのダウンロード中にアニメーションを表示します。そうでないときは非表示にします。

問題は、ファイルが完全にダウンロードされたとき、つまり iframe が完全にロードされたときを Chrome が認識できないことです。iframe プロパティreadyStateを使用して、iframe の状態を確認します。

var iframe = document.createElement("iframe");
iframe.style.visibility = "hidden";
// I start a progress animation
window.setTimeout(showProgressAnimation, 1000);
// I start the file download
iframe.src ='GetFile.aspx?file=' + fileName;
document.body.appendChild(iframe);


function showProgressAnimation() {
   if (iframe.readyState == "complete" || iframe.readyState == "interactive") {
      // I stop the animation and show the page
      animation.style.display = 'none';
      progressBar.hide();
      $('#page').show();
   }
   else {
      // Chrome is always getting into this line
      window.setTimeout(showProgressAnimation, 1000);
   }
}

したがって、結果は無限ループです。

次のことを試してみましたが、Firefox と Chrome では機能しますが、内容がバイナリ ファイルの場合は機能しません。

if ($.browser.mozilla || $.browser.webkit ) {
    iframe.onload = function showProgressAnimation() {
        animation.style.display = 'none';
        progressBar.hide();
        $('#page').show();
    }
}
// IE
else{
     window.setTimeout(showProgressAnimation, 1000);
}
4

4 に答える 4

15

onloadの負荷を知らせるために を使用できます。iframe

ここに動作する簡単な例があります

var iframe = document.createElement("iframe");
iframe.style.display = "none";
// this function will called when the iframe loaded
iframe.onload = function (){
  iframe.style.display = "block";    
  alert("loaded");
};
// set the src last.
iframe.src ='http://www.test.com';

// add it to the page.
document.getElementById("one").appendChild(iframe);

ここでテスト:
http://jsfiddle.net/48MQW/5/最後にロードされます
。http://jsfiddle.net/48MQW/24/src

于 2012-12-19T14:08:01.763 に答える
5

ダウンロード可能なファイルのコンテンツは、readystatechange イベント ハンドラーまたは onload イベント ハンドラーをトリガーしません。これにより、サーバー側でファイルの内容と一緒に Cookie を設定し、クライアント側でこの Cookie を定期的にチェックすることができます。例えば：

サーバ

response.cookie('fileDownloaded','true');
response.header('attachment','your-file-name.any');
//...write bytes to response...

クライアント

var checker = setInterval(()=>{
    if(document.cookie.indexOf('fileDownloaded')>-1){
        alert('done');
        clearInterval(checker);
    }
},100);

もちろん、フレームワークを使用して Cookie の値を正しくチェックできます。これは単なる poc であり、安全な Cookie パーサーではありません。

于 2016-12-12T15:49:02.477 に答える
2

これを試してみてください - 行ごとに dom と jQuery を実際に混在させています

var tId;

function stopAnim() {
    // I stop the animation and show the page
    animation.hide();
    progressBar.hide();
    $('#page').show();
    clearInterval(tId);
}
var iframe = $("<iframe />");
iframe.css("visibility","hidden");

iframe.on("readystatechange",function() {
 if (this.readyState == "complete" || this.readyState == "interactive") {
   stopAnim();
 }
});
iframe.on("load",function() { // can possibly be deleted
 if (tId) {
   stopAnim();
 }
});

iframe.attr("src","GetFile.aspx?file=" + fileName);
$("body").append(iframe);
tId = setInterval(function() {
  // update progress here
}, 1000); //
于 2012-12-19T13:42:06.453 に答える