<x id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea id=t'+i:'<iframe')+' style=width:49%;height:48% oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>
ここでデモを見ることができます 。 そして、このテキストとコードをブラウザーのアドレスバーに貼り付けるだけです。
data:text/html,%20<x%20id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea%20id=t'+i:'<iframe')+'%20style=width:49%;height:48%%20oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>
スクリプトのロジックは非常にシンプルです。3つの
textarea
要素と1つの
iframe
がループで作成され、ループ変数は
textarea
と
iframe
作成を切り替えるフラグとして使用されます。 次に、
oninput
イベント
oninput
ハングアップし、3つのテキスト領域のテキストがフレーム内のドキュメントの対応する部分に追加されます。
誰かが突然見逃した場合、JavaScriptの創造的な使用とHabréで公開されたブラウザーの組み込み機能のさらに2つの例を次に示します。