4

我有一个 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>

在单击事件上，我调用一个函数以在 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 中只看到网络表单。

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

浏览器会忽略 onreadystatechange 事件。我尝试按以下方式处理事件：

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

但没有成功。

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

4

2 回答 2

5

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

$('#previewContent').on('load', iframeLoaded);
于 2013-10-15T15:32:21.857 回答
2

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

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

相反，获取对iframe元素的引用并将DOMContentLoaded侦听器添加到其contentDocument属性。由于您iframe可能已经完全加载，您应该检查它contentDocument的 's并在尚未加载readyState的情况下取消侦听器。iframe最后，一些浏览器 - 即 Firefox - 目前不从 iframe 发出DOMContentLoaded事件，因此作为后备，您可以在' 的属性或 iFrame 本身上添加一个load侦听器。iframecontentWindow

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();
于 2016-04-15T06:52:50.603 回答