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要素のリソースが読み込み成功/失敗完了した事を保証できます。
コード事例
下記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()
が活用できるかもしれません。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。