ページに IFrame があります。親ページには、IFrame を送信するボタンがあります。フォームの送信時に親ページに ProgressBar イメージを表示する送信イベントのハンドラーがあります。この部分はすべて正常に機能しているため、フォームがサーバーに送信され始めると画像が表示されます。
サーバー上で Excel ファイルが生成され、クライアントにダウンロードされます。私がする必要があるのは、イメージがクライアントへのダウンロードをいつ終了したかを知ることです。これにより、その ProgressBar イメージを親ページで非表示に戻すことができます。
IFrame がサーバーからのポストバックを完了し、ファイルがダウンロード可能になったときを知るために、どのイベントを利用できるかわかりません。
IFrame に次のコードがあります
$(document).ready(function () {
window.parent.$('#ExportWait').addClass('hidden');
var iframe = window.frameElement;
if (iframe) {
iframe.contentDocument = document;//normalization: some browsers don't set the contentDocument, only the contentWindow
var parent = window.parent;
$(parent.document).ready(function () {//wait for parent to make sure it has jQuery ready
var parent$ = parent.jQuery;
parent$(iframe).trigger("iframeloading");
$(function () {
parent$(iframe).trigger("iframeready");
});
$(window).load(function () {//kind of unnecessary, but here for completion
parent$(iframe).trigger("iframeloaded");
});
$(window).unload(function (e) {//not possible to prevent default
parent$(iframe).trigger("iframeunloaded");
});
$(window).on("beforeunload", function () {
parent$(iframe).trigger("iframebeforeunload");
});
});
}
$("form").submit(function (e) {
//console.log('Here We Are');
//alert('Exporting');
//window.parent.$('#ExportWait').removeClass('hidden');
return true;
});
});
そして、親ウィンドウに次のコードがあります
$(document).ready(function () {
$("iframe").on("iframeloading iframeready iframeloaded iframebeforeunload iframeunloaded", function (e) {
console.log(e.type);
});
});
コンソールで次のように表示されます iframeloading iframeready iframeloaded ----これらの 3 つは、ページと IFrame が最初に読み込まれたときのものなので、これらのいずれも気にしません ----次に、エクスポートを実行すると、iframebeforeunload が表示されます
しかし、ファイルのダウンロードがいつ完了したかはわかりません。