2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTML: iframeを使った手品

Last updated at Posted at 2024-03-09

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

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

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

再帰処理?

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

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

setIntervalのようなsetTimeout

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

5001のような極端に低い値にすると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"'>
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?