質問: "URL"; function xxx(e){ alert("発火");★これが発火しない } ``` ■やりたい事 addEventListener("load",xxx)だと画像読み込み後にイベントが発生するので、遅いです。 iframeのソースが返ってきた直後にイベントを呼びたいのです。 ■質問 なぜDOMContentLoadedが発火しないのでしょうか。 コーディングが悪いのでしょうか? それともcreateElement('iframe')はDOMContentLoadedのイベントに対応していないのでしょうか? その場合、上記【やりたい事】の代案はございますでしょうか?
回答: まず`DOMContentLoaded`は`Window`に対して発火するイベントですので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"); } ```