その場でIframeを作成し、URLとしてバイナリファイル(xls、doc ...)をダウンロードするページを設定します。ファイルのダウンロード中にアニメーションを表示します。そうでない場合は、非表示にします。
問題は、Chromeはファイルが完全にダウンロードされたとき、つまりiframeが完全に読み込まれたときを知らないことです。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);
}
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/
最後にsrc
がロードされました。
http://jsfiddle.net/48MQW/24/
ダウンロード可能なファイルコンテンツは、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の値を正しくチェックできます。これは単なる安全なCookieパーサーではなく、単なるPOCです。
これを試してください-あなたは本当に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); //