JavaScriptのonloadイベント発火タイミングとiframeの関係について

実現したいこと

・HTML内にiframeを埋め込んでいる
（以下iframe埋め込み先を親画面、埋め込まれる画面を子画面と記載）
・親画面と子画面の読み込みが終わった状態でとある関数を実行したい

想定している方法

親画面のonloadイベントから対象の関数を呼ぶ

理由と懸念点

子画面の読み込み終了⇒子画面のonloadイベント⇒親画面のonloadイベント
の順番となると認識しています。つまり親画面のonloadイベントが発火した場合は既に親画面も子画面も読み込みが終わっている状態であるので親画面のonloadイベントで関数を呼ぶ実装としたいと思っています。実際にコンソールログ出力などで試してみましたが想定通りでした。

質問内容

「親画面のonloadが発火した時には親画面も子画面も画面読み込みが終了している」という認識は正しいでしょうか。また、正しい場合は根拠となるサイトがあれば教えてください。

行動規範の内容に同意します

回答3件

「親画面のonloadが発火した時には親画面も子画面も画面読み込みが終了している」

「画面読み込み」が「load イベントを起こす準備ができている」という意味であれば、保証されています。
が、ざっと見た感じでは load イベントリスナが実行される順番は子が先である保証はないかもしれません。

https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event

ドキュメント中に delay the load event の要因がある限りは、そのドキュメントの load イベントを起こさないようになっています。

https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element:delay-the-load-event

iframe などの要素が、埋め込まれたドキュメント内に delay the load event の要因がある限りは iframe を持つドキュメントの delay the load event の要因となります。

投稿2024/04/25 07:02

int32_t

総合スコア20916

lazyロードがあるので子ウィンドウが必ず先に読まれるという保証はありません
（逆にいえば遅延読み込みしなければ先に読まれるということ）
技術文書が必要でしたらECMAScriptの各種仕様書をご確認ください

投稿2024/04/25 06:14

編集2024/04/25 06:15

yambejp

総合スコア114883

UI Events

「親画面のonloadが発火した時には親画面も子画面も画面読み込みが終了している」という認識は正しいでしょうか。また、正しい場合は根拠となるサイトがあれば教えてください。

UI Eventsでは load イベントを下記のように定義しています。

https://triple-underscore.github.io/uievents-ja.html#event-type-load

UA は、［ DOM 実装がリソース（文書など）, およびすべての従属リソース（画像, スタイルシート, スクリプトなど）の読み込みを完遂した］とき，このイベントを発火するものとする。従属リソースの読み込みに失敗した場合でも、それを読み込んだリソースが DOM を介して依然としてアクセス可能である場合には，このイベントの発火は止めないものとする。実装が，このイベント型を発火するときには、少なくとも Document ノード上に配送することが要求される。

iframe要素を同期読み込みしているなら、iframe要素を定義したHTML文書において、window.onload が発火した時にiframe要素を含む従属リソースが読み込み成功/失敗が完了した事を保証できます。

<iframe loading="lazy"> を指定しているのなら、iframe要素に load イベントを仕掛けることで、iframe要素のリソースが読み込み成功/失敗完了した事を保証できます。

<iframe>: インラインフレーム要素 - HTML: ハイパーテキストマークアップ言語 | MDN

コード事例

下記HTMLの場合、foo.html で window.onload が発火した時に foo.html, bar.html どちらの関数も呼び出し可能です。

foo.html

html
1<!DOCTYPE html>
2<html lang='ja'>
3
4<head>
5  <meta charset='utf-8'>
6  <title>foo</title>
7  <script>
8    'use strict';
9    addEventListener('load', event => {
10      hello(); // "foo"
11      document.querySelector('iframe').contentWindow.hello(); // "bar"
12    }, false);
13      </script>
14</head>
15
16<body>
17<iframe src="bar.html"></iframe>
18  <script>
19'use strict';
20const hello = () => console.log('foo');
21  </script>
22</body>
23
24</html>

bar.html

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title>bar</title>
6  </head>
7  <body>
8    <script>
9      'use strict';
10      var hello = () => console.log('bar');
11    </script>
12  </body>
13</html>

ただし、前提として bar.html に一つ以上のグローバル変数が必要となるので、このような実装はお勧めしません。
foo.html, bar.html で各々完結する実装にするのが理想だと思います。
状況によっては、従属リソースの処理を誘発させる為に dispatchEvent() が活用できるかもしれません。

投稿2024/04/25 11:38

編集2024/04/25 11:39