Question

我有一个asp.webforms应用程序，在页面上我有一个带有progressbar和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>

在点击事件中，我调用一个函数在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();
                            }
                        }
                    });
        }

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

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

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

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

但没有成功。

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

Answer 1

我不确定你是否有使用onreadystatechange的具体原因，但是如果你只是想知道iframe何时加载，那么load事件将处理它。

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

Answer 2

如原始问题中所示，将onreadystatechange属性添加到iframe标记似乎无能为力。不要这样做：

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

而是获取对iframe元素的引用，并向其DOMContentLoaded属性添加contentDocument侦听器。由于您的iframe可能已经完全加载，因此如果contentDocument尚未加载，则应检查其readyState iframe并取消收听者。最后，某些浏览器 - 即Firefox - 目前不会从iframe中发出DOMContentLoaded事件，因此，对于后备，您可以在load＆＃39;上添加iframe侦听器。 s 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();

IFrame OnReadyStateChange函数

2 个答案: