NO.121 ウィンドウ応用①

インラインフレームの制御

あんまり実用的ではないかもしれませんが、インラインフレームも立派な｢ウィンドウ｣として扱えます。
つまりwindowとしてサイズを変更したり移動するといった作業も可能です。
下らなくてこんな解説載せてるサイトはあまり無いようですが、別にDHTMLの範囲まで行かなくてもインラインフレームは操作できます。
IEのみ実行可能みたいですよ。

実行例

ソース

<form name=mad onSubmit="return false">
<select name=sl>
<option value=0>moveBy</option>
<option value=1>resizeBy</option>
</select>
<table><tr><td></td><td><input type=button value="↑"onClick=js1a()></td><td></td></tr>
<tr><td><input type=button value="←"onClick=js1b()></td><td><input type=button value="●"onClick=js1e()></td><td><input type=button value="→"onClick=js1c()></td></tr>
<tr><td></td><td><input type=button value="↓"onClick=js1d()></td><td></td></tr>
</table>
</form>
<iframe src=about:blank name=f1 width=100 height=100></iframe>
<script type=text/javascript>
<!--
function js1a(){if(document.mad.sl.value==0){f1.moveBy(0,-30);}else{f1.resizeBy(0,-30);}}
function js1b(){if(document.mad.sl.value==0){f1.moveBy(-30,0);}else{f1.resizeBy(-30,0);}}
function js1c(){if(document.mad.sl.value==0){f1.moveBy(30,0);}else{f1.resizeBy(30,0);}}
function js1d(){if(document.mad.sl.value==0){f1.moveBy(0,30);}else{f1.resizeBy(0,30);}}
function js1e(){f1.resizeTo(100,100);f1.moveTo(screen.width/2-50,screen.height/2-50);}
f1.document.open();
f1.document.write("インラインフレーム(f1)");
f1.document.close();
js1e();
-->
</script>

実行

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

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