JavaScript]フォームから別ウィンドウを開くためのTipsをまとめました。別ウィンドウで起動されるCGIにフォームデータを渡したいフォームボタンを複数回クリックしたときに別ウィンドウを1枚しか開きたくないフォームボタンを複数回クリックしたときに別ウィンドウを複数枚開けるようにしたいと、色々なケースがあります。業務で使うCGIを開発するときにこれらのことをネットで色々調べたのですが、FAQサイトなどに個別の情報が散在しているだけでしたので、このエントリーで一挙にまとめてみました。ここではjQueryを使わないオーソドックスなコードで解説します。コード内に使われているCGI(new_window.cgi)は6項に掲載しています。サンプルを実行する場合、すべての資材を同じディレクトリに配置して実行してください。2.基本動作フォームから別ウィンドウを開くには、form要素にtarget属性を与え、値に「_blank」を設定する方法があります。/></form>ただし、この方法ではタブブラウザでは新しいタブが開きます。ウィンドウとして開くには、type属性値が「submit」のinput要素にonclickイベントハンドラを与え、イベントハンドラの中でwindow.openメソッドを起動します。false」を設定しておきます。この設定を行わないと、元ウィンドウでもaction属性に設定されたCGIが実行されてしまいます。open関数の引数は次の通りです。第3引数:ウィンドウのスタイルウィンドウ名に「_blank」を設定すれば、クリックするたびに新しい画面が開きます。サンプルでは「hoge」という固定文字列を与えているので1枚しか開きません。3.新しいウィンドウにデータを渡す(開くウィンドウはひとつ)新しいウィンドウにフォームデータを渡すには、イベントハンドラのパラメータでフォームデータを渡し、そのフォームデータでform.submitメソッドを起動します。このケースではwindow.openの第1引数は使わない(form要素のaction属性値が使われる)ので「about:blank」を設定しています。onclick="open2(this.form)"/></form>4.新しいウィンドウにデータを渡す(開くウィンドウは複数)新しいウィンドウを複数開く方法です。3項では新しいウィンドウを開いた状態でフォームボタンをクリックしても、常に1枚しか開きませんが、本項では別のウィンドウを開くことができます。onclick="open3(this.form)"/></form>window.openの第2引数に、常に値が異なるようタイムスタンプを設定します。2項のケースではウィンドウ名に「_blank」を設定すれば異なるウィンドウが開きますが、JavaScript内からsubmitを起動する場合は期待した動作になりません(新しい空のウィンドウが開き、もうひとつ別のウィンドウが開いてCGIが起動される)。5.新しいウィンドウにボタンの値を渡す最後に、新しいウィンドウにtype属性値が「button」のinput要素の値を渡す方法です。値を渡すにはvalue属性をイベントハンドラのパラメータに渡し、その値をtype属性が「hidden」のinput要素に設定します。/></form>6.CGIサンプル上記のサンプルから起動されるCGIです。動作確認用にご利用ください。ここにブログの名前を入れますスタイルシートを適用するとどうなるかチェックできるスクリプト。外部のホームページにも適用できます。ここにブログの名前を入れますスタイルシートの属性をタグから切り離し、外に書く方法。今回はスクリプトを用いて、外部スタイルシートがどう適用されるのかを試します。PMコメントはじめまして。「ここにブログの名前を入れます」というブログを書いているTomと申します。ブログの記事で、スタイルシートチェッカーというスクリプトを書いたのですが、開いたウインドウにデータを送る方法がわからずに困っていました。こちらのサイトを参考にさせていただき解決できました。ありがとうございます。PM>Tomさんこんばんは。コメントありがとうございます。記事がお役に立ったようでよかったです。*必須(非表示)URL(U):情報を保存する?コメントへの返信ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。すべてのご質問にはお答えできない可能性があります。Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。コメントありがとうございます。スタイルシートの属性をタグから切り離し、外に書く方法。