TopJavaScript > 2010年12月
2010年12月20日

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

December 20,2010 12:55 AM
Tag:[, ]
Permalink

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

1.はじめに

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

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

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

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

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

2.基本動作

フォームから別ウィンドウを開くには、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枚しか開きません。

3.新しいウィンドウにデータを渡す(開くウィンドウはひとつ)

新しいウィンドウにフォームデータを渡すには、イベントハンドラのパラメータでフォームデータを渡し、そのフォームデータで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>

4.新しいウィンドウにデータを渡す(開くウィンドウは複数)

新しいウィンドウを複数開く方法です。3項では新しいウィンドウを開いた状態でフォームボタンをクリックしても、常に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引数に、常に値が異なるようタイムスタンプを設定します。2項のケースではウィンドウ名に「_blank」を設定すれば異なるウィンドウが開きますが、JavaScript内からsubmitを起動する場合は期待した動作になりません(新しい空のウィンドウが開き、もうひとつ別のウィンドウが開いてCGIが起動される)。

5.新しいウィンドウにボタンの値を渡す

最後に、新しいウィンドウに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>

6.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();
Comments [2] | Trackbacks [2]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3