別窓で掲示板を利用したい

質問

お世話になります。
あるサイト制作で、縦幅が500pxと固定になっています。
背景に使う画像がそこまでなのでその範囲内でページを作っています。

ただ掲示板や買い物かごを利用するとなると縦幅が下にのびるのでデザイン上はとても格好悪いという状態です。
そこで別窓を開いて利用して貰いたいと考えています。

掲示板の新規投稿欄や買い物かごの「注文する」は元ページにあるのですがそこからcgiへ渡すデータを新しいウィンドウへどうやればうまく渡せるでしょうか？
正確には欲しいサイズで開いて欲しいのです。

<form・・・>にtarget="blank"指定をすると別窓は開きますがブラウザ依存の幅で開いてしまいます。
これを500*500等の指定サイズで開きたいのです。

素人考えで、
<Script Laungage='JavaScript'>
function ToOrder()
{
frmSend.submit();
location.href="../cgi-bin/order.cgi";
}
</script>
<input・・・>で　OnClick="ToOrder();"とやりましたがうまくいきません。

<input>に新窓の指定をすると新しい窓と元ページ、どちらもCGIへ移動してしまいました。。。

しっかり学んで行かねばなりませんが
今この問題を解決するためにアドバイスをいただければと思います。
よろしくお願いいたします。

回答No.3

noname#199778 · ベストアンサー

ちょっと考え方をひねって、こうしてみてはいかがでしょうか?

<form action="***.cgi" target="order">
～～～
<input type="submit" onClick="window.open('','order','width=500, height=500, scrollbars=1')">
</form>

こうすると、サブミットと同時にonClickでJavaScriptからorderという名前を付けたウィンドウを開き、それをターゲットとしてフォームが動作してくれるのではないでしょうか?
動作を確認していないので、ちょっと自信なしですが…

あと、背景画像が500pxしかなくて、それ以上スクロールすると体裁が悪いということを気になさるのであれば、あるいは背景画像を固定する指定を入れて、スクロールしても背景画像が移動しないようにするのも、解決策の一つになるかもしれません。
こちらの場合でしたら、スタイルシートを使うことで対処できると思います。

<style type="text/css"><!--
body {background-image: url("***.jpg");
background-attachment: fixed;}
--></style>

以上のように、「background-attachment: fixed;」というスタイルシート指定を、head内のスタイル要素に入れれば、背景画像は固定されてスクロールしても移動しなくなります。

参考になれば幸いです。 見当違いでしたら、ごめんなさい。

お礼

お世話になりました。
サイズ固定という厄介な問題ですが、これは知人のお店で
長年使ってきた看板（ブリキ）を背景に使いたいという
要望からでした。

さて別窓問題ですが、基本的にうまくいきました。
開いた後のサイズなど問題もありましたが、
新しく開く先に
JavaScriptでresizeTo指定で調整をしました。

考えてみればtarget指定で開いてリサイズしても良かったのかも・・
一瞬サイズが変わるようすがイヤで敬遠していましたが。。。

CSSによる背景固定ですと看板の下に何か文字が続くのはイヤだと言われ却下されました。
この部分だけ背景ではなくテーブルにより上下に画像を置き
長い看板のようにもできますがそれもイヤだと言われましたので・・・

とにかく動作確認をもらいＯＫが出ました。
この間勉強になりました。
素晴らしいアドバイスをくださり感謝します。

回答No.2

blood_kazuaki

はじめまして。
あなたがおっしゃっていることは、おそらくJavaScriptとフォーム渡しで解決できることだと思います。

> ・・・ですが、formからの入力データがCGIへ渡りません。
> nameやmailなど必要なデータが行かず空っぽです。

↑　よくわかりません(;;

元のウィンドウがあって
新しいウィンドウを開いて、その後の処理がよくわかりません。
CGIって言葉も、使い方を間違っているような気が・・・
単純にCGIに渡すタイミングを間違えてる、って気もしますけど。。。

もしわからない場合は、、、
どのウィンドウで、何をクリックしたり選択したりして
画面がどう遷移するのか。
詳しいところをもう少し、ご説明願います。

補足要求です。

お礼

どうもありがとうございました。

自分では目の当たりにしているので状況説明などを
省略しすぎたと反省しています。
自分が行っている作業について理解が足りないと説明も
満足にできない。。。
そう言ったことも勉強になりました。

関心をお寄せくださりどうもありがとうございました。

補足

お世話様です。
自分は目の当たりにしているので省略したりしていることも多いかなと思います。

横750*縦500固定のページサイズという前提です。
背景に使う画像がこの範囲内なので固定となっています。
通常ページは問題がなく、メールフォームも簡単なのでこの範囲内に収まっています。
しかし掲示板や買い物かごを使う場合、当然のことながら縦幅はその範囲をオーバーしてしまいます。
フレームを使った構成ではなく一枚物（？）のページです。
またNC4.xでも見られるようにとIFRAMEは使えません。

そこで固定サイズを超えるようなコンテンツは別窓を出してそこで利用してもらおうと考えています。
今回の相談の中心的な問題は買い物かごです。
（掲示板は別途準備でき一つ解決できました。）

「フラワーショップ」なのですが、アレンジフラワーの一覧から一つを選ぶと詳細ページになります。
そこに解説と価格などがあり一番下には「オーダーする」というinputボタンがあります。
通常ならこのままformで指定されたorder.cgiへ飛んで確認ページになるのですが、住所入力欄などが
あるため縦幅を超えてしまいます。

最初はformにtarget-blank指定で別に開かせましたが元ページ、別窓共にcgiが呼ぶテンプレートページに
なってしまいました。
javascriptで別窓を開く設定をしてinputボタンでそれを呼ぶと見事別窓のみが買い物かごに行きました。
ただ「オーダーする」としたときに入れた数量や色希望などのデータが反映されず、「買い物かごには
何もない」となります。

<form name="orderform" action="shop.cgi" method="post" >
・・・
<select name="color">
<option value="red" selected>赤</option>
<option value="blue">青</option>
</select>
・・・
<input type="submit" name="submit" value="オーダーする">

このformに何らかの指定をするのか、input側に指定をするのか、
別にjavascriptにより別窓へ制御を掛けるのか。
色々と試していますがうまくいかなくて相談をしました。

これらについて何かアドバイスをお願いしたく思います。

回答No.1

nana_ko

以前こういうふうに使ってました↓

<script language="JavaScript">
<!--
function OpenWin2(){
win2=window.open("CGIのURL","new2","width=320,height=500,scrollbars=yes");
}
//-->
</script>

で、<a href="javascript:OpenWin2()">というリンクを貼って。
自由に縦横は変えてください。

お礼

お世話になりました。
cgiへのデータ私がうまくいかず悩みましたが、みなさまのアドバイスのおかげでなんとかクリアできました。
別窓問題は過去にも結構あるようですが、じっくり考えるきっかけになりました。
他にも使えるテクニックも学べました。

どうもありがとうございました。

補足

どうもです。
ご指摘のように別窓が開いてCGIが反応しました。
・・・ですが、formからの入力データがCGIへ渡りません。
nameやmailなど必要なデータが行かず空っぽです。

これはやはりsubmitのように渡す仕掛けが必要なのでしょうか？

自分でもあれこれ試してみます。