IFrame OnReadyStateChange函数

Question

我有一个asp.webforms应用程序,在页面ai有一个隐藏的div与progressbar和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中加载URL时,进度条消失,我只看到IFrame中的webforms.

但在FireFox和Chrome中,这不起作用.

浏览器忽略onreadystatechange事件.我试图处理如下事件:

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

但没有成功.

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

Answer 1

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

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