新規Windowの作成
-
0 名前： 5/27 ： 2006/05/28（日） 08:07 ID:v4C6AEvd
- ローカルで利用しています。
アルバム作成のために<form>内のtext,fail等の値をdocument.writeで書き出していますが、ページのレイアウトとかデザインの設定をjavascriptのdocument.writeで 一つ一つhtmlを設定すると javascriptが長くなるので 書式設定した新規ページのそれぞれの場所に 取得したvalueを入れる方法が 解りません、cgiではよくあるのですが javascriptで可能なのでしょうか？
可能ならばゴードを 教えて下さい、御願いします。
<script type="text/javascript">
<!--
var iLoc1, iLoc2, iLoc3, iTxt, nCont;
function init() { //変数の設定
iLoc1 = document.iForm.imgLoc1;
iLoc2 = document.iForm.imgLoc2;
iLoc3 = document.iForm.imgLoc3;
iTxt = document.iForm.imgTxt;
iTxt1 = document.iForm.imgTxt1;
iTxt2 = document.iForm.imgTxt2;
iTxt3 = document.iForm.imgTxt3;
}
function createPage() { //画像を表示するウィンドウの生成
if(!iLoc1.value || !iLoc2.value || !iLoc3.value || !iTxt.value || !iTxt1.value || !iTxt2.value || !iTxt3.value) { //未入力確認
alert('フォーム未入力');
return;
}
nCont = new Array( //新規ウィンドウの中身
'<title>画像ページ</title>',
'<body>',
'<table border="0" width="600" cellpadding="1" cellspacing="0" align="center">',
'<tr><th>',
'<p style="font-size:1.5em;font-family:sans-serif">' + iTxt.value + '</p>',
'</th></tr>',
'</table>',
'<br>',
'<table border="1" width="600" cellpadding="8" cellspacing="0" align="center">',
'<tr><th width="400">',
'<p><img src="' + iLoc1.value + '" alt="" width="390"></p>',
'</th><td>',
'<p style="font-size:1.2em;font-family:sans-serif">' + iTxt1.value + '</p>',
'</td></tr>',
'<tr><th width="400">',
'<p><img src="' + iLoc2.value + '" alt="" width="390"></p>',
'</th><td>',
'<p style="font-size:1.2em;font-family:sans-serif">' + iTxt2.value + '</p>',
'</td></tr>',
'<tr><th width="400">',
'<p><img src="' + iLoc3.value + '" alt="" width="390"></p>',
'</th><td>',
'<p style="font-size:1.2em;font-family:sans-serif">' + iTxt3.value + '</p>',
'</td></tr>',
'</table>',
'<table border="0" width="600" cellpadding="1" cellspacing="0" align="center">',
'<tr><td align="right">',
'<p style="font-size:0.9em;font-family:sans-serif">▼▼▼▼▼▼</p>',
'</td></tr>',
'</table>'
);
var newWin = window.open();
newWin.document.write(nCont.join('\n'));
newWin.document.close();
}
//-->
</script>
このhtmlの設定部分をもっとレイアウト・デザインを新規ページで作り込みていのです。
-
1 名前： Pid ◆byEkK9OALr ： 2006/05/28（日） 08:07
- > 書式設定した新規ページのそれぞれの場所に 取得したvalueを入れる方法
ぱっと見（細かい問題はとりあえず無視します），>>0 のコードでできているように見えますが。誤字のせいで文意が読み取れないので，「今，何が問題なのか」「どうなれば良いのか」をもう一度説明してもらえますか。
＊ ＊ ＊
なお，HTML テンプレートを別ファイルにし，必要に応じてテンプレートファイルを読み込んで，更にその中から必要な部分だけをコピーする，ということも可能です。方法はブラウザによってバラバラですので，ご使用のブラウザの機能をお調べ下さい（ローカルでの作業であれば，クロスブラウザをあまり意識せずに済むでしょう）。
-
2 名前： 5/27 ： 2006/05/28（日） 08:07 ID:TJ01Otez
- 説明が うまくいってないみたいなので もう一度。
書き出すWEBページのデザイン・レイアウトを、もっと 見た目を考えて造りたいのです、背景を指定したりとかです。そこでjavascript内でhtmlの記述をすると 長くなってしまいますので、javascriptで取得したvalueのみを 準備しているhtmlページ内の 特定の場所に反映させたいのです(画像・テキストなど)。
例えばメール送信フォームなどで 入力された値が 別に用意してあるhtmlに書き出されるような、具体的には 少し 意味がわかっていないのですが。
<form action="." name="iForm">
<p>
ページのタイトル記入欄:
<input type="text" name="imgTxt" size="50"value="タイトル記入欄" maxlength="24" style="background-color:#fff5f7;">
</p>
<br>
<p>
画像（一枚目）
<input type="file" name="imgLoc1" size="50" style="background-color:#fbfbce;">
<br>
①説明文
<textarea name="imgTxt1" rows="3" cols="30" style="background-color:#fbfbce;"></textarea>
</p>
<br>
<p>
<input type="button" value="以上の内容でアルバムを作成する" onClick="createPage()">
</p>
</form>
この値を 別に用意してあるhtmlページに 入れたいのですが。
説明不足かも解りませんが、よろしく 御願いします。
-
3 名前： Pid ◆byEkK9OALr ： 2006/05/28（日） 08:07
- えーと，それならば外部 CSS ファイルを一つ用意すれば良いだけではないでしょうか。
form 要素の class 属性を動的に変更しさえすれば，見た目のほとんどは外部 CSS でコントロールできるはずですが。
-
4 名前： 5/27 ： 2006/05/28（日） 08:07 ID:xLEuh5Ht
- ▼確かに!!
いろいろと 考えすぎて 身近なところが 見えなくなっていました。
>Pidさん ありがとう御座いました。
