以下のhtmlでは何が起こるのでしょうか?
<body onload="document.write(0)">
<img onload="write(1)" src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
<svg onload="write(2)"></svg>
<script>
window.onload=a=>document.write(3)
</script>
<iframe onload="outerHTML=4"></iframe>
<object onload="write(5)" data="data:,"></object>
<input onload="write(6)" type=image src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
0123456が表示されると思ったら大間違いです。本当です信じて下さい。発動順はBrowserによって変わります。配置場所は無関係っぽいです。body要素のonloadはscript要素により書き換わっています。逆にhead要素にscript要素を記述している場合はbody要素のonloadがそのまま発動します。
さて、そうなると発動順に数字が表示されるのでしょうか? あいにくとそういう訳にはいきません。
何と最終的に1文字のみ表示されます。何でもしませんから信じて下さい。
どうして1文字のみになるかと考察してみると、document.write(略してwrite)を実行すると実質htmlが全て書き替えられるせいで、他のonloadが消し飛んでいると結論付けられます。発動順の検証例は以下の通り。
<body onload="console.log(0)">
<img onload="console.log(1)" src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
<svg onload="console.log(2)"></svg>
<script>
window.onload=a=>console.log(3)
</script>
<iframe onload="console.log(4)"></iframe>
<object onload="console.log(5)" data="data:,"></object>
<input onload="console.log(6)"type=image src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
ではimg要素のみを複数並べるとどうなるのでしょうか?
<img onload="write(1)" src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
<img onload="write(2)" src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
<img onload="write(3)" src=data:image/gif;base64,R0lGODdhAQABAAAAAAA>
先頭のimg要素のonloadから処理されていきます。最終的に1のみが表示されます。input要素の場合も同様っぽい臭いです。
ではsvg要素を連発すると…
<svg onload="write(0)"></svg>
<svg onload="write(1)"></svg>
<svg onload="write(2)"></svg>
何と毎回結果が異なります。1文字だけなのは変わりませんが、どの文字になるかは不確定です。object要素でも同様の結果でした。
iframeの連発ですか? そんなもの知ってどうするんですか? いやらしいですね…。別に面白い事は何もありませんよ…ウヒヒヒ。
余談
img要素に埋め込む画像次第で結果は変わるかもしれません。svg要素についても中身次第で結果が変わるかもしれません。
ちなみに前述のimg要素の画像はイカサマ仕込みの胡散臭いインチキ画像なのでonload不発になる可能性があります。臭くない画像は以下の通り。
<img src=data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAA>
<img src=data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAAA>
これらのonloadの特性を利用して何か面白い活用法を編み出してみて下さい。個人的にはsvg要素によるJavaScript召喚でshort codingするが面白いですね
実験環境
窓s 10、偶狂苦労夢 最新版