NO.143 ドキュメント応用③

可動式インラインフレームで背景色を調節する

今日もうちの頭の悪さを存分に発揮した実例です。
明らかに｢ドキュメント｣の範囲を超えていますが、かろうじて｢JavaScript｣の範囲は超えてないと思います。
普通はこういうのって画像使ったりすると思うのですが、敢えてインラインフレームに拘ってみました。
もちろんIE以外では動かないと思います。

実行例

ソース

<script type=text/javascript>
<!--
function js1(){
f1.document.open();
f1.document.writeln("<script>B=0;");
f1.document.writeln("function sss(){return false;}");
f1.document.writeln("function mmm(){if(document.body.clientWidth<=10){window.resizeTo(10,40)}}");
f1.document.writeln("function jjj(){B=1;}function lll(){B=0;}");
f1.document.writeln("function kkk(){if(B==1){if(event.x>=0&&event.x<=740){window.resizeTo(event.x+60,40);}}");
f1.document.writeln("SS=Math.floor(((document.body.clientWidth-60)/740)*0xff).toString(16);");
f1.document.writeln("if(parseInt(SS,16)<16){SS='0'+SS;}");
f1.document.writeln("document.bgColor='#'+SS+'0000';");
f1.document.writeln("LL=parent.document.bgColor;LL=LL.substr(3,4);");
f1.document.writeln("parent.document.bgColor='#'+SS+LL;parent.window.status='#'+SS+LL;");
f1.document.writeln("}");
f1.document.writeln("document.write('<center><table><tr><td>red</td></tr></center>');");
f1.document.writeln("document.onmouseout=mmm;");
f1.document.writeln("document.onselectstart=sss;");
f1.document.writeln("document.onmousemove=kkk;");
f1.document.writeln("document.onmousedown=jjj;");
f1.document.writeln("document.onmouseup=lll;document.bgColor='#ff0000';");
f1.document.writeln("</script>");
f1.document.close();
f2.document.open();
f2.document.writeln("<script>B=0;");
f2.document.writeln("function sss(){return false;}");
f2.document.writeln("function mmm(){if(document.body.clientWidth<=10){window.resizeTo(10,40)}}");
f2.document.writeln("function jjj(){B=1;}function lll(){B=0;}");
f2.document.writeln("function kkk(){if(B==1){if(event.x>=0&&event.x<=740){window.resizeTo(event.x+60,40);}}");
f2.document.writeln("SS=Math.floor(((document.body.clientWidth-60)/740)*0xff).toString(16);");
f2.document.writeln("if(parseInt(SS,16)<16){SS='0'+SS;}");
f2.document.writeln("document.bgColor='#00'+SS+'00';");
f2.document.writeln("LL=parent.document.bgColor;MM=LL.substr(5,2);LL=LL.substr(1,2);");
f2.document.writeln("parent.document.bgColor='#'+LL+SS+MM;parent.window.status='#'+LL+SS+MM;");
f2.document.writeln("}");
f2.document.writeln("document.write('<center><table><tr><td>green</td></tr></center>');");
f2.document.writeln("document.onmouseout=mmm;");
f2.document.writeln("document.onselectstart=sss;");
f2.document.writeln("document.onmousemove=kkk;");
f2.document.writeln("document.onmousedown=jjj;");
f2.document.writeln("document.onmouseup=lll;document.bgColor='#00ff00';");
f2.document.writeln("</script>");
f2.document.close();
f3.document.open();
f3.document.writeln("<script>B=0;");
f3.document.writeln("function sss(){return false;}");
f3.document.writeln("function mmm(){if(document.body.clientWidth<=10){window.resizeTo(10,40)}}");
f3.document.writeln("function jjj(){B=1;}function lll(){B=0;}");
f3.document.writeln("function kkk(){if(B==1){if(event.x>=0&&event.x<=740){window.resizeTo(event.x+60,40);}}");
f3.document.writeln("SS=Math.floor(((document.body.clientWidth-60)/740)*0xff).toString(16);");
f3.document.writeln("if(parseInt(SS,16)<16){SS='0'+SS;}");
f3.document.writeln("document.bgColor='#0000'+SS;");
f3.document.writeln("LL=parent.document.bgColor;LL=LL.substr(1,4);");
f3.document.writeln("parent.document.bgColor='#'+LL+SS;parent.window.status='#'+LL+SS;");
f3.document.writeln("}");
f3.document.writeln("document.write('<center><table><tr><td>blue</td></tr></center>');");
f3.document.writeln("document.onmouseout=mmm;");
f3.document.writeln("document.onselectstart=sss;");
f3.document.writeln("document.onmousemove=kkk;");
f3.document.writeln("document.onmousedown=jjj;");
f3.document.writeln("document.onmouseup=lll;document.bgColor='#0000ff';");
f3.document.writeln("</script>");
f3.document.close();
}
window.onload=js1;
-->
</script>
<style type=text/css>
<!--
.sc{background-color:lightblue;width:800;}
-->
</style>
<div class=sc id=sc>
<iframe src=about:blank name=f1 width=800 height=40 scrolling=no frameborder=no></iframe>
</div>
<div class=sc id=sc>
<iframe src=about:blank name=f2 width=800 height=40 scrolling=no frameborder=no></iframe>
</div>
<div class=sc id=sc>
<iframe src=about:blank name=f3 width=800 height=40 scrolling=no frameborder=no></iframe>
</div>

※event.x⇒マウスのx座標を参照、Math.floor(数式)⇒数式を整数にする(小数点以下切り捨て)、変数=数式.toString(a)⇒数式をa進数にして変数に格納する、
parseInt(数式,a)⇒数式をa進数から10真数にする、変数=文字列.substr(a,b)⇒文字列からa+1番目の文字からb文字を抜き出して変数に格納する

実行 ※それぞれのカラーのフレームを左右に引っ張ってみて下さい。

トップに戻る前に戻る　次に進む

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送