【JavaScript入門】iframeの読み込み完了を検知する方法｜onloadで安全にDOMへアクセスする手順を初心者向けに解説

iframe の DOM を操作するには、読み込み完了のタイミングを正しく検知することが重要です。
この記事では、onload を使った安全な操作方法や、同一オリジン制限によるアクセス可否、実務で注意すべきポイントを分かりやすく解説します。

iframe の DOM を触るには「読み込み完了」が必須

iframe は外部ページを読み込むため、
読み込みが完了する前に DOM を触るとエラー になります。

そのため、JavaScript では onload を使って
「iframe が読み込まれたタイミング」を検知する必要があります。

基本：iframe.onload で読み込み完了を検知する

const iframe = document.getElementById("myFrame");

iframe.onload = () => {
  console.log("iframe の読み込みが完了しました");
};

onload が発火するのは、
iframe 内の HTML がすべて読み込まれた後 です。

読み込み完了後に DOM を操作する例

const iframe = document.getElementById("myFrame");

iframe.onload = () => {
  const doc = iframe.contentDocument;
  const title = doc.querySelector("h1").textContent;

  console.log("iframe 内のタイトル:", title);
};

読み込み前に contentDocument を触ると null になるため、
必ず onload 内で操作する必要があります。

addEventListener を使う書き方

iframe.addEventListener("load", () => {
  console.log("読み込み完了（addEventListener）");
});

複数の処理を登録したい場合はこちらが便利です。

同一オリジン制限に注意

iframe 内の DOM を操作できるのは
同一オリジン（同じドメイン） の場合のみです。

• 同一ドメイン → DOM 操作可能
• 別ドメイン → DOM 操作不可（セキュリティ制限）

例：以下は操作できないケース

<iframe src="https://example.com"></iframe>

この場合、onload は発火しますが、
contentDocument にアクセスするとエラー になります。

iframe の読み込みが遅い場合の対策

• 読み込み中にローディング表示を出す
• onload でローディングを消す
• タイムアウト処理を入れる

特に外部サービスを iframe で読み込む場合、
読み込み時間が長くなることがあるため、
UX のためにローディング表示が推奨されます。

まとめ

iframe の DOM を操作するには、
onload で読み込み完了を検知することが必須 です。

読み込み前に contentDocument を触ると null になるため、
必ず onload 内で処理を書くようにしましょう。

また、別ドメインの iframe は DOM 操作できないため、
必要に応じて postMessage を使うのが安全です。