IFrame OnReadyStateChange函数

Question

我有一个asp.webforms应用程序，在页面a上，我有一个隐藏的div，里面有进度条和iframe。对于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中时，进度栏消失，我在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

向iframe标记添加onreadystatechange属性(如原始问题中所示)似乎没有任何作用。不要这样做：

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

相反，获取对iframe元素的引用，并将DOMContentLoaded侦听器添加到其contentDocument属性。因为你的iframe可能已经装满了，你应该检查它的contentDocument的readyState，如果iframe还没有装入，你应该取消监听器。最后，一些浏览器--比如火狐--目前不会从iFrame发出DOMContentLoaded事件，所以为了回退，你可以在iframe的contentWindow属性上添加一个load监听器，或者在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();