javascript IFrame OnReadyStateChange 函数

IFrame OnReadyStateChange function

提问by Davecz

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.

我有一个 asp.webforms 应用程序，并且在页面 ai 上有一个带有进度条和 iframe 的隐藏 div。对于 iframe，我尝试从同一域上的另一个应用程序加载表单。

<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.

在单击事件中，我调用一个函数以在 jqueryUI 对话框中显示此 div，并且我想显示进度条，直到未加载 Iframe 中的页面。

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.

在 IE 中一切正常。对话框和进度条显示，当 URL 加载到 iframe 中时，进度条消失，我在 iframe 中只看到 webforms。

But in FireFox and Chrome this does not work.

但是在 FireFox 和 Chrome 中这不起作用。

The browser ignores the onreadystatechange event. I tried to handle an event as following:

浏览器忽略 onreadystatechange 事件。我试图处理一个事件如下：

$('#previewContent').bind('onreadystatechange', iframeLoaded, false); 
$('#previewContent').on('onreadystatechange', iframeLoaded);

but without success.

但没有成功。

know how to solve this? thanks

知道如何解决这个问题吗？谢谢

回答by Kevin B

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.

我不确定您使用 onreadystatechange 是否有某些特定原因，但是如果您只想知道 iframe 何时完成加载，则 load 事件会处理它。

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

回答by cacheflowe

Adding the onreadystatechangeattribute to an iframetag as shown in the original question doesn't seem to do anything. Don'tdo this:

如原始问题所示，将onreadystatechange属性添加到iframe标签似乎没有任何作用。不要这样做：

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

Instead, grab a reference to the iframeelement and add a DOMContentLoadedlistener to its contentDocumentproperty. Since your iframemight already be fully loaded, you should check its contentDocument's readyStateand cancel the listener if the iframeisn't loaded yet. Finally, some browsers - namely Firefox - don't currently emit a DOMContentLoadedevent from iframes, so for a fallback you could add a loadlistener on the iframe's contentWindowproperty, or the iFrame itself.

相反，获取对iframe元素的引用DOMContentLoaded并向其contentDocument属性添加侦听器。由于您iframe可能已经完全加载，如果尚未加载，您应该检查它的contentDocument'sreadyState并取消侦听器iframe。最后，某些浏览器（即 Firefox）当前不会DOMContentLoaded从 iframe发出事件，因此对于回退，您可以load在iframe的contentWindow属性或 iFrame 本身上添加侦听器。

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