人気ブログランキング | 話題のタグを見る

HTML BOX 改訂版

HTML 文書のオンラインエディタ HTML BOX を改定して、レンダリングが同じウィンドウに表示されるようにしました。ソースは下記のとおりです。パブリック・ドメイン・ソフトにしますので自由に利用してください。
HTML BOX 改訂版_d0038298_23090758.png
トリックはCSSの float:left 属性で main ボックスと preview ボックスを横に並べたことと、preview 要素に iframe を使い、d_ocument.getElementById('preview').contentWindow.document 要素を取得して preview.o_pen(), pereview.w_rite(), preview.c_lose() で書き込んでいるところです。iframe に直に文字列を書き込む方法をネットで探すのに苦労しました。

原始的なプログラムですが、ブラックボックスでないところがうれしいと思います。ブラウザは全画面表示で使わないと表示がエディタの下にきます。次に実行例を示します。かなり気ままに書いても動作するのはブラウザのレンダリングエンジンが優秀だからです。もちろん<html>~</html> の完全な HTML 文書も表示できます。
HTML BOX 改訂版_d0038298_23174800.png
実例は次のリンクへ

HTML BOX 改訂版

by tnomura9 | 2016-01-04 23:24 | JavaScript | Comments(0)
<< HTML BOX Z (zen... javascript のオンラ... >>