小粋空間  -  a cheap joke and a play on words site

フォームから別ウィンドウを開く方法のまとめ

フォームから別ウィンドウを開くためのTipsをまとめました。

１．はじめに

フォームから別ウィンドウを開く場合、

• 別ウィンドウで起動されるCGIにフォームデータを渡したい
• フォームボタンを複数回クリックしたときに別ウィンドウを1枚しか開きたくない
• フォームボタンを複数回クリックしたときに別ウィンドウを複数枚開けるようにしたい

と、色々なケースがあります。

業務で使うCGIを開発するときにこれらのことをネットで色々調べたのですが、FAQサイトなどに個別の情報が散在しているだけでしたので、このエントリーで一挙にまとめてみました。

ここではjQueryを使わないオーソドックスなコードで解説します。コード内に使われているCGI（new_window.cgi）は６項に掲載しています。サンプルを実行する場合、すべての資材を同じディレクトリに配置して実行してください。

２．基本動作

フォームから別ウィンドウを開くには、form要素にtarget属性を与え、値に「_blank」を設定する方法があります。

<form method="post" target="_blank" action="./new_window.cgi">
  <input name="id" type="submit" value="新しいウィンドウを開く" />
</form>

ただし、この方法ではタブブラウザでは新しいタブが開きます。

ウィンドウとして開くには、type属性値が「submit」のinput要素にonclickイベントハンドラを与え、イベントハンドラの中でwindow.openメソッドを起動します。

<script type="text/javascript">
function open1() {
    window.open("new_window.cgi", "hoge", 'width=200, height=200');
}
</script>

<form method="post" action="./new_window.cgi" onsubmit="return false;">
  <input type="submit" name="id" value="新しいウィンドウを開く" onclick="open1()"/>
</form>

form要素にはonsubmitイベントハンドラを与え、値に「return false」を設定しておきます。この設定を行わないと、元ウィンドウでもaction属性に設定されたCGIが実行されてしまいます。

open関数の引数は次の通りです。

• 第1引数：起動URL
• 第2引数：ウィンドウ名
• 第3引数：ウィンドウのスタイル

ウィンドウ名に「_blank」を設定すれば、クリックするたびに新しい画面が開きます。サンプルでは「hoge」という固定文字列を与えているので1枚しか開きません。

３．新しいウィンドウにデータを渡す（開くウィンドウはひとつ）

新しいウィンドウにフォームデータを渡すには、イベントハンドラのパラメータでフォームデータを渡し、そのフォームデータでform.submitメソッドを起動します。このケースではwindow.openの第1引数は使わない（form要素のaction属性値が使われる）ので「about:blank」を設定しています。

<script type="text/javascript">
function open2(f) {
    f.target = "hoge";
    var w = window.open("about:blank", f.target, 'width=200, height=200');
    w.focus();
    f.submit();
}
</script>

<form method="post" action="./new_window.cgi" onsubmit="return false;">
  <input type="text" name="data" />
  <input type="submit" name="id" value="送信" onclick="open2(this.form)"/>
</form>

４．新しいウィンドウにデータを渡す（開くウィンドウは複数）

新しいウィンドウを複数開く方法です。３項では新しいウィンドウを開いた状態でフォームボタンをクリックしても、常に1枚しか開きませんが、本項では別のウィンドウを開くことができます。

<script type="text/javascript">
function open3(f) {
    window.name = (new Date()).getTime();
    var date = new Date();
    var time = date.getTime()
    f.target = window.name + time;
    var w = window.open("about:blank", f.target, 'width=200, height=200');
    w.focus();
    f.submit();
}
</script>

<form method="post" action="./new_window.cgi" onsubmit="return false;">
  <input type="text" name="data" />
  <input type="submit" name="id" value="送信" onclick="open3(this.form)"/>
</form>

window.openの第2引数に、常に値が異なるようタイムスタンプを設定します。２項のケースではウィンドウ名に「_blank」を設定すれば異なるウィンドウが開きますが、JavaScript内からsubmitを起動する場合は期待した動作になりません（新しい空のウィンドウが開き、もうひとつ別のウィンドウが開いてCGIが起動される）。

５．新しいウィンドウにボタンの値を渡す

最後に、新しいウィンドウにtype属性値が「button」のinput要素の値を渡す方法です。値を渡すにはvalue属性をイベントハンドラのパラメータに渡し、その値をtype属性が「hidden」のinput要素に設定します。

<script type="text/javascript">
function open4(f, value) {
    f.button.value = value;
    f.target = "new";
    var w = window.open("about:blank", f.target, 'width=200, height=200');
    w.focus();
    f.submit();
}
</script>

<form method="post" action="./new_window.cgi">
  <input type="text" name="data" />
  <input type="hidden" name="button" />
  <input type="button" value="送信1" onclick="open4(this.form, '送信1')" />
  <input type="button" value="送信2" onclick="open4(this.form, '送信2')" />
</form>

６．CGIサンプル

上記のサンプルから起動されるCGIです。動作確認用にご利用ください。

#!/usr/bin/perl
 
use strict;
use CGI;
 
my $q = new CGI;
 
print $q->header(-charset=>'utf-8',);
print $q->start_html();
 
print '<p>テスト</p>';
print 'text:',$q->param('data') if $q->param('data');
print '<br />button:',$q->param('button') if $q->param('button');
 
print $q->end_html();