18

DOMContentLoaded イベントが発生しない限り (this.elsは要素のオブジェクトです)、以下が機能していないように見えることに驚きました。

this.els.stage_ifr.prop('src', 'templates/'+ee.globals.creating+'/item'+this.id);
this.els.stage_ifr[0].addEventListener('DOMContentLoaded', function() {
    alert('loaded!');
}, false);

ページは iframe に正常に読み込まれますが、コールバックはありません。onloadただし、DOM レベル zeroは機能します。

this.els.stage_ifr[0].onload = function() { alert('loaded!'); }; //<-- fires

回避策は、親ページでグローバルにアクセス可能な jQuery 遅延オブジェクトを準備し、親からの DOM 対応をリッスンするのではなく、iframe に呼び出されたページから発生する DOM 対応イベントを介して解決することです。

親ページ:

dfd = new $.Deferred;
dfd.done(function() { alert("frame page's DOM is ready!"); });

フレームページ:

$(function() { window.parent.dfd.resolve(); });

それにもかかわらず、最初のアプローチがどうなっているのかを知ることは良いことです...

4

4 に答える 4

32

この質問に答える過程で、あなたのDOMContentLoadedイベント リスナーが機能しない理由を発見しました。あなたには2つの問題があるようです。

DOMContentLoadedまず、 iFrame 自体でイベントをリッスンしようとしています。これは iFrame イベントではありません。ドキュメントイベントです。そのため、iFrame に到達して contentWindow を取得し、そこからドキュメントを取得する必要があります。それが 2 番目の問題につながります。

第 2 に、iFrame が最初に作成されるとき、属性documentを介して動的コンテンツが読み込まれるときに最終的に存在するドキュメントとは異なるダミーが含まれます。.srcしたがって、たとえあなたがしたとしても：

this.els.stage_ifr.contentWindow.document

iFrame でドキュメントを取得する場合、必ずしも正しいドキュメントであるとは限らないため、DOMContentLoadedイベントは発生しません (Chrome でこの動作を見たことがあります)。

MDN はDOMFrameContentLoaded、iFrame 自体でイベントをリッスンできると述べており、これは、基になるドキュメントが実際に を取得するタイミングに対応しますDOMContentLoaded。残念ながら、このイベントをどのブラウザーでも動作させることはできません。したがって、現時点で私が知っている唯一の回避策は、独自のDOMContentLoadedイベントをリッスンできる iFrame 自体からロード イベントをトリガーすることです (必要に応じて親ウィンドウを呼び出すことができます)。 iFrame オブジェクトのイベントをリッスンしload、iFrame 内のスタイル シートや画像などのリソースも読み込まれるまでイベントが発生しないことを認識します。

とにかく、最初のコードで何が起こっていたのかを説明し、この質問が 1 年以上前に投稿されたにもかかわらず (回答はありませんでしたが)、別の解決策を提供したいと思いました。

アップデート：

DOMContentLoaded親と同じオリジンでロードされた iFrameを追跡する方法を開発しました。コードはこちらでご覧いただけます。

于 2014-07-08T00:25:09.917 に答える