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