IFrame OnReadyStateChange function

Question

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

Answer 1

I'm not sure if there's some specific reason why you're using onreadystatechange, but if you just want to know when the iframe is done loading, the load event will handle that.

$('#previewContent').on('load', iframeLoaded);

Answer 2

Adding the onreadystatechange attribute to an iframe tag as shown in the original question doesn't seem to do anything. Don't do this:

<iframe onreadystatechange="iframeReady(this);"></iframe>

Instead, grab a reference to the iframe element and add a DOMContentLoaded listener to its contentDocument property. Since your iframe might already be fully loaded, you should check its contentDocument's readyState and cancel the listener if the iframe isn't loaded yet. Finally, some browsers - namely Firefox - don't currently emit a DOMContentLoaded event from iframes, so for a fallback you could add a load listener on the iframe's contentWindow property, or the iFrame itself.

function listenForIframeReady() {
  if (iframe.contentDocument.readyState === "interactive" || iframe.contentDocument.readyState === "complete") {
    iframeReady();
  } else {
    iframe.contentDocument.addEventListener('DOMContentLoaded', iframeReady);
    iframe.contentWindow.addEventListener('load', iframeReady);
    iframe.addEventListener('load', iframeReady);
  }
}

function iframeReady() {
  console.log('iframe is ready');
  iframe.contentDocument.removeEventListener('DOMContentLoaded', iframeReady);
  iframe.contentWindow.removeEventListener('load', iframeReady);
  iframe.removeEventListener('load', iframeReady);
}

var iframe = document.querySelector('iframe');
listenForIframeReady();