0

■事象
iframeを動的に作成(createElement)して、
addEventListenerに「DOMContentLoaded」を追加しているが、
iframeのsrc先のDOM読み込み完了時にイベントが発生しません。

■コーディング

var parent_obj = document.getElementById("top");
var obj = document.createElement('iframe');

if(obj.addEventListener){
    obj.addEventListener("DOMContentLoaded",xxx);//★これが発火しない
    //obj.addEventListener("load",xxx);//☆遅い
}else if(obj.attachEvent){
    obj.attachEvent("onload",xxx);
}else{
    obj.onload = xxx;
}

parent_obj.appendChild(obj);
obj.src = "URL";

function xxx(e){
    alert("発火");★これが発火しない
}

■やりたい事
addEventListener("load",xxx)だと画像読み込み後にイベントが発生するので、遅いです。
iframeのソースが返ってきた直後にイベントを呼びたいのです。

■質問
なぜDOMContentLoadedが発火しないのでしょうか。
コーディングが悪いのでしょうか?

それともcreateElement('iframe')はDOMContentLoadedのイベントに対応していないのでしょうか?
その場合、上記【やりたい事】の代案はございますでしょうか?

2

2 件の回答 2

1

まずDOMContentLoadedWindowに対して発火するイベントですのでiframe要素に対して使うことはできません。

クロスオリジンの場合は、iframe側のページのHTTPヘッダやスクリプトを操作する必要があります。
それができない場合は以下の手法は使えません…、というより恐らく不可能です。

手法1. 双方のドキュメントのドメインを合わせる

もし親側とiframe側の上位ドメインが共通であれば、次のスクリプトでページドキュメントのドメインを上位ドメインに合わせるだけで目的を達成できます。

document.domain = "your-domain.com";

参考: 同一オリジンポリシー#オリジンの変更 - MDN

共通の上位ドメインがない場合は、次の手法2か3に頼ります。

手法2. iframe側に親側のオリジンからの操作を許可する

iframe側のHTTPヘッダーを書き加えられる場合は、次のヘッダーをサーバーサイドから出力してください。

Access-Control-Allow-Origin: http://your-parent-page.com

手法3. postMessageを使う

若干面倒ですがクロスドメイン通信が可能なwindow.postMessageでなんとかします。
挙動などの詳細は window.postMessage - MDN を参考にしてください。

親ページ:

window.addEventListener("message", messageCallback, false);

function messageCallback(event) {
  if (event.origin !== "http://your-iframe-page.com") return;
  if (event.data === "iframe loaded!") {
    /* ロード完了 */
    alert("発火");
  }
}

iframeページ:

window.addEventListener("DOMContentLoaded", loadedCallback, false);

function loadedCallback(event) {
  window.parent.postMessage("iframe loaded!", "http://your-parent-page.com");
}
0

HTMLIFrameElementにはcontentWindowおよびcontentDocumentというプロパティが存在しますので、そちらのイベントを拾えばよいのではないでしょうか。

obj.contentDocument.addEventListener("DOMContentLoaded",xxx);
1
  • クロスオリジン、クロスドメインがやりたい事の前提です。 その場合、DOM系のイベントが使えないのですね。 それでは上記【やりたい事】の代案はございますでしょうか?
    – YYYYY
    Commented 2016年12月11日 11:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。