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"'>