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

Solution 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);

Solution 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();

Comments

[Kevin B]

Use the load event. Why is there a space here? $('# previewContent')

[Davecz]

I wanted use onreadystatechange to detect if iframe is fully loaded. Is interesting that it works in IE but not in other browsers

[Kevin B]

It seems to be a proprietary thing to IE. I don't see any reference to that outside of the msdn. The msdn also doesn't link to any specs related to it.

[Oskar]

If the frame does not load this event will not be fired in Firefox