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>

クリックイベントで、このdivをjqueryUIダイアログに表示する関数を呼び出し、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 ではすべて正常に動作します。ダイアログ ボックスとプログレス バーが表示され、URL が iframe に読み込まれると、プログレス バーが消え、IFrame に Web フォームのみが表示されます。

しかし、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追加します。はすでに完全にロードされている可能性があるため、 を確認し、まだロードされていない場合はリスナーをキャンセルする必要があります。最後に、一部のブラウザー (Firefox など) は現在iframe からイベントを発行しないため、フォールバックのために、のプロパティまたは iFrame 自体にリスナーを追加できます。DOMContentLoadedcontentDocumentiframecontentDocumentreadyStateiframeDOMContentLoadedloadiframecontentWindow

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 に答える