HTML: iframeを使った手品

onload属性内部ではiframe自身を指すobjectを省略可能

<iframe onload="style.border='2px solid red';className='css'">

勿論他にも色々な属性を参照できる。

再帰処理?

<iframe onload="id++<9&&(outerHTML+=id)">

iframeのidは既定値で空文字。加算処理で0としても扱える。当然outerHTMLはiframeのものを指す。
面白い事にonloadの処理を反復している。ただの反復ではなく再帰処理ッポイのだ。

setIntervalのようなsetTimeout

<iframe onload="setTimeout(a=>srcdoc=++id,50)">

50を0や1のような極端に低い値にするとbrowserがerrorを起こすかも。最悪の場合熱暴走を起こして死に至る。

危険な永久再描画

CPUに高負荷がかかり続けます。browserが逝くかerror起こして止まるか…。ろくな結末を迎えない事は確かである。

<iframe onload="src='data:,iframe'">

<iframe onload="srcdoc='iframe'">

無限の入れ子

これまた危険なhtml。ある程度描画したところで強制停止するかも。

<iframe onload='srcdoc=outerHTML'>

<iframe onload='contentWindow.document.write(outerHTML)'>

CodePenもどき

画面左端のiframeにhtmlを描画、その右のtextareaにhtml記述、その右のtextareaにcss記述、その右にJavaScript記述。textareaのonchange eventを起点にして再描画処理。

<iframe onload='id++<3?outerHTML+=`<textarea onchange="f[${id}]=value;f.srcdoc=f[3]+\`<script>\${f[1]}</script><style>\`+f[2]"rows=9>`:id="f"'>