Tipsメニュー

PreView機能

Sample

お名前
題名
記事


☆ソースの解説☆

<head>〜</head>に置くScript

<!--ここから-->
<script language="JavaScript">
<!--
(注１)
function WinOpenPreview(kakiko,dai,hname,W,H){
(注２)
var n=0;
var key='\r'
while((n=kakiko.indexOf(key,n))!=-1){
kakiko=kakiko.substring(0,n)+'<br>'+kakiko.substring(n+key.length,kakiko.length);
}
window.onerror=null;
var WinPreview=window.open('',(W+'')+(H+''),'scrollbars=1,width='+W+',height='+H+'');
(注３)
WinPreview.document.write('<html><head><META HTTP-EQUIV="Content-Type"
CONTENT="text/html;CHARSET=x-sjis"><title>プレビュー画面</title></head>
<body><center><table border="1"><tr><td width="100">お名前</td>
<td width="360">',hname,'　</td></tr><tr><td width="100">題名</td>
<td width="360">',dai,'　</td></tr><tr><td width="100">記事</td>
<td width="360">',kakiko,'　</td></tr></table><form><input type="button"
value="閉じる" onClick="self.close()"></form></center></body></html>');
WinPreview.document.close();
WinPreview.focus();
}
<!---->
</script>

コピーはこちらからどうぞ。


　<body>〜</body>に置くもの

<form name="f1">
　　…
　　<input type="text" name="handle">
　　…
　　<input type="text" name="subject">
　　…
　　<textarea name="message"></textarea>
　　…
　　<input type="button" value="PreView"
　　onClick="kakiko=f1.message.value;dai=f1.subject.value;
　　hname=f1.handle.value;WinOpenPreview(kakiko,dai,hname,650,300)">
　　…
</form>(注１）

コピーはこちらからどうぞ。

解説です。

(注１)
まず<body>〜</body>のformに名前を付けます。ここでは「f1」としています。さらに、form内の各「部品」に名前を付けます。…といっても既に名前が付いていると思います。etc1とか、message等です。次にonClick=""の中で
kakiko=f1.message.value
のように新しい変数に換えておきます。この指定の仕方は「部品」の種類で異なり、
テキストフィールド系 kakiko=f1.message.value
選択リスト系 opt1=f1.etc1.options[f1.etc1.selectedIndex].value
ラジオボタンの値 fontcolor=f1.etc2.value
チェックボックスの
チェックの有無		 yesno=f1.etc3.checked
のように指定します。ここでチェックボックスに関しては「チェックの有無」なので気をつけて下さい。次にonClick=""内の一番最後のWinOpenPreview( )はPreViewウィンドウを開くための命令です。( ) 内には各新しい変数名を書き、最後に新規ウィンドウの幅、高さを指定します。
<haed>〜</head>のScriptでは例のように<body>内で記述したWinOpenPreview(…)と同じものを記述して下さい。

(注２)
formから受け取ったkakikoという値（記事内容に相当します）の改行コードを htmlの<br>に変換するための作業です。例えば…
「書き込み
　内容」 		→ 「書き込み<br>内容」
という具合です。もしこれ以外にも改行を反映させたい部分があったら、同様のスクリプトを増やしておいて下さい。
（追記）
改行コードは\nだと思っていたのですが、実際は「win:\r\n,mac:\r,unix:\n」とのことで、普及率の高いwinとmacに合わせて\rでソースを組みました。そのためunixには非対応です。。。
(注３)
新規ウィンドウに出力するhtmlです。このサンプルでは単純なhtmlとして記しましたが、背景なども指定することができます。htmlの記述に慣れていなければ、編集ソフトで予めソースを用意しておいてから貼り付けると良いでしょう。気をつけるべきポイントは、「１行（改行なし）で書くこと」「変数以外の部分は' 'でくくること」です。 つまり、 「'内容１',変数１,'内容２',変数２,'内容３'」という具合です。スタイルシートなどでどうしても「'」を使う場合は「\'」と書いて下さい。<form>〜</form>は新規ウィンドウを閉じるための記述です。
さらに、応用として次のように書きなおすと良いでしょう。

WinPreview.document.write('<html>…<td width="100">お名前</td><td width="360">');
if(hname=='')
{
WinPreview.document.write('お名前が未入力です');
}
else
{
WinPreview.document.write(hname);
}
WinPreview.document.write('</td></tr>…</body></html>');
これは名前が未入力の場合（hname==''に相当）にそれを表示するための記述です。このifの( )内はチェックボックスのみ扱い方が別で…、
「チェックが入っているならば」は「if(hogehoge==true) 」のように書きます。「' '」は不要です。