I have an asp.webforms application and on page a i have a hidden div with progressbar and iframe. To iframe i try loaded form from another application on same domain.
<div id=pagePreview style=display: none;>
<div class=progressBarWrapper id=waitDialog style=opacity:1;filter:alpha(opacity=100);display:none;>
<div class=progressBarDetail style=margin-top:25%;>
<asp:Image ID=imgLoading runat=server ImageUrl=~/Images/wait.gif />
</div>
</div>
<iframe id=previewContent onreadystatechange=iframeLoaded(this);></iframe>
</div>
On a click event i call a function to show this div in jqueryUI dialog and i Want show progressbar until the page in Iframe is not loaded.
var isClickedForDialog = false;
function iframeLoaded(args) {
if (args.readyState == complete && isClickedForDialog) {
var pagePreview = $('#pagePreview'); // dialog
var waitDialog = $('#waitDialog'); // progress
waitDialog.hide();
isClickedForDialog = false;
}
}
function showModalWindow(url, hideCloseButton) {
isClickedForDialog = true;
var previewContent = $('#previewContent'); // Iframe
var pagePreview = $('#pagePreview'); // dialog
var waitDialog = $('#waitDialog'); // progresss
waitDialog.show();
previewContent.attr('src', url);
pagePreview.dialog(
{
draggable: false,
resizable: false,
height: 764,
width: 1020,
modal: true,
close: function (event, ui) {
previewContent.attr('src', '');
},
open: function (event, ui) {
if (hideCloseButton) {
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
}
}
});
}
In IE everything works fine. The dialog box and progressbar displays and when the URL is loaded in an iframe, progressbar disappears and i see only webforms in IFrame.
But in FireFox and Chrome this does not work.
The browser ignores the onreadystatechange event. I tried to handle an event as following:
$('#previewContent').bind('onreadystatechange', iframeLoaded, false);
$('#previewContent').on('onreadystatechange', iframeLoaded);
but without success.
know how to solve this? thanks