Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

データの受け渡しができるサブウインドウ(モーダルダイアログ)を開く方法

JavaScriptのshowModalDialogメソッドを使えば、閉じるまで他の操作をできなくするウインドウ「モーダルダイアログ」を開くことができます。その方法は、記事「閉じるまで他の操作をできなくするウインドウ(モーダルダイアログ)を開く」で解説しました。別ウインドウ側で「絶対に先に操作して欲しい」処理を書いている場合などに使うと便利です。

さて、このモーダルダイアログは、呼び出し元の親ウインドウとの間で、データの受け渡しが可能です。例えば、

  • 親(呼び出し元)ウインドウ側から、データを子(サブ)ウインドウ側へ送る
  • 子(サブ)ウインドウ側から、データを親(呼び出し元)ウインドウ側へ送る

といったことが可能です。(どちらか片方だけでも、両方でも可能。)

データの受け渡しをするサブウインドウの例

以下の枠内に掲載しているボタン『モーダルダイアログ(都道府県選択画面)を開く』をクリックすると、都道府県名の入力を求めるサブウインドウ(モーダルダイアログ)が開きます。その際、下記のように親ウインドウとサブウインドウ間でデータの受け渡しをしています。

  • ボタンの前にある2つのチェックボックスをチェックした結果は、サブウインドウ側へ渡され、サブウインドウ側の表示に反映されます。
  • また、サブウインドウ側で選択した都道府県名は、サブウインドウを閉じたときに、親ウインドウ(今見ているこのページ)側の入力欄に入力されます。

実際にサンプルを試してみて下さい。




↓ ↓ ↓
入力結果:

サブウインドウは「モーダルダイアログ」として表示されるので、サブウインドウを閉じるまで、このページには戻って来れません。サブウインドウが開いている間は、ブラウザのメインウインドウ側をクリックして戻ろうとしても拒否されます。このようにしておくと、ユーザの操作ミスを防ぐことができて便利です。

サブウインドウ側で都道府県名を選択して「選択完了」ボタンを押すと、上記のテキスト入力欄に、選択した都道府県名が入ります。ただし、「選択完了」ボタンを押す以外の方法でサブウインドウを閉じると、(おそらく)undefinedが入ります。(実際に使う際にはこの辺のエラー処理も加えておく方が良いとは思います。)

こんな感じで、サブウインドウと親ウインドウとの間で、データのやりとりが可能です。

サブウインドウとの間でデータの受け渡しをする方法

showModalDialogメソッドを使って(サブウインドウを閉じるまで他の操作を受け付けなくするタイプの)サブウインドウを開く方法については、「閉じるまで他の操作をできなくするウインドウ(モーダルダイアログ)を開く」をご参照下さい。
以下では、そのサブウインドウ(モーダルダイアログ)との間でデータをやりとりする方法だけに絞って解説します。

とはいえ、「showModalDialogメソッドを使って開いたサブウインドウ」と「親ウインドウ」との間でデータをやりとりする方法は、とても簡単です。
要は、(1)配列を送って、(2)文字列を受け取る……というだけです。
記述方法は以下のような感じです。

retString = showModalDialog( 開きたいURL , sendArguments , ダイアログのオプション );

上記の

  • 「sendArguments」の部分が、サブウインドウへ送るデータを格納した変数
  • 「retString」の部分が、サブウインドウから返ってくるデータを格納する変数

です。
たったこれだけです。
まあ、簡単ですね。^^;

送るデータは、配列の形にすることで、複数個のデータを一括して送れます。

var sendArguments = new Array( データ1, データ2, データ3, …… );
var retString = showModalDialog( 開きたいURL , sendArguments , ダイアログのオプション );

上記のような感じで配列を作って、それをshowModalDialogメソッドの第2引数に渡してやれば良いでしょう。

サブウインドウとの間でデータの受け渡しをするサンプル

では、冒頭に掲載したサンプル「都道府県名の入力サブウインドウ」を作るソースをご紹介致します。
ここでは、

  1. 親(呼び出し元)ウインドウ側のHTMLソース
  2. 親(呼び出し元)ウインドウ側のJavaScriptソース
  3. 子(サブ)ウインドウ側のHTMLソース
  4. 子(サブ)ウインドウ側のJavaScriptソース

……の順で紹介します。

親(呼び出し元)ウインドウ側のHTMLソース

まず、HTMLを以下のように書いておきます。
ここでは、チェックボックスを2つ、ボタンを1つ、テキスト入力欄を1つ作っているだけです。

<label><input type="checkbox" id="forModalDialogCheck1" />サブウインドウの背景色を黄色にする</label><br />
<label><input type="checkbox" id="forModalDialogCheck2" />サブウインドウの文字色を緑色にする</label><br />
<input type="button" value="モーダルダイアログを開く" onclick="showModalPrefectureWindow();" /><br />
↓ ↓ ↓<br />
入力結果:<input type="text" id="fromModalDialog" />

それぞれ、JavaScript側から制御しやすいように、id属性を使ってid名を割り振ってあります。
また、ボタンは、クリック時に(この後で記述する)showModalPrefectureWindow関数を実行するようonclick属性を記述しています。

親(呼び出し元)ウインドウ側のJavaScriptソース

次に、JavaScriptを以下のように書きます。
内容は大きく分けて3ステップ「(1)送るデータを準備」→「(2)サブウインドウを開く」→「(3)データを受け取る」です。

<script type="text/javascript"><!--
   function showModalPrefectureWindow() {

      // ▼モーダルダイアログ側へ送るデータを準備
      var check1 = document.getElementById("forModalDialogCheck1").checked;
      var check2 = document.getElementById("forModalDialogCheck2").checked;
      var sendArguments = new Array( check1, check2 );

      // ▼モーダルダイアログを開いて、結果のデータを受け取る
      var retString = showModalDialog("prefectures.html", sendArguments,"dialogHeight: 300px; dialogWidth: 400px; center: 1;");

      // ▼受け取った結果を表示
      document.getElementById("fromModalDialog").value = retString;

   }
// --></script>

上記のJavaScriptソースの内容を簡単に説明すると、以下の通りです。

  • まず、チェックボックスのチェック状況を変数(check1,check2)に格納し、それを配列(sendArguments)に格納しています。もっと短く書いて良いと思いますが、ここでは分かりやすさを重視して冗長に書いています。
  • 次に、showModalDialogメソッドを使って、サブウインドウ(モーダルダイアログ)を開きます。このとき、第2引数に配列(sendArguments)を指定することで、データを送っています。また、サブウインドウ側から返ってくるデータを変数(retString)で受け取っています。
  • 最後に、受け取った内容をテキスト入力欄に入力しています。

子(サブ)ウインドウ側のHTMLソース

サブウインドウ側のHTMLソースに関しては、さほど特殊なことは書いていないので、詳しくは直接サブ用ページのHTMLソースを見て頂きたいのですが、主なポイントは以下の部分です。

まず、body要素にonload属性を付加して、ページの読み込みが完了したときに、親ウインドウから受け取ったデータを処理する関数setParams(この後で作成)を呼び出しています。

<body onload="setParams();">

ここでは「ページの読み込みが完了したとき」を実行タイミングに指定しましたが、別に他のタイミングで実行しても構いません。

次に、都道府県名を選択するためのプルダウンメニューを作成しています。これは何も特殊な部分はなく、ただselect要素とoption要素を使って作っているだけです。

<select id="prefecture">
   <option value="北海道">北海道</option>
    : : :
</select>

select属性には、JavaScript側から選択内容を参照するために、id名を付加しています。

最後に、親ウインドウ側へデータを返すために、ボタンを用意して、親ウインドウへデータを返すための関数retPrefecture(この後で作成)を実行しています。

<input type="button" value="選択完了" onclick="retPrefecture();">

ポイントは以上です。
ここで呼び出しているsetParams関数とretPrefecture関数は、以下の通り作成します。

子(サブ)ウインドウ側のJavaScriptソース

最後に、サブウインドウ側のJavaScriptソースを、以下のように記述します。

<script type="text/javascript">

   // ▼親ウインドウからデータを受け取る
   function setParams() {
      var parentData = window.dialogArguments;
      if( parentData[0] == true ) { document.bgColor = "#ffffcc"; }
      if( parentData[1] == true ) { document.fgColor = "#008000"; }
   }

   // ▼親ウインドウへデータを返す
   function retPrefecture() {
      window.returnValue = document.getElementById("prefecture").value;
      window.close();
   }

</script>

ここでのポイントは、以下の2点です。

  • 親ウインドウから送られてきたデータは、window.dialogArguments で得られる。
  • 親ウインドウへデータを返すには、window.returnValue に値を代入する。

この2点さえ知っておけば、親ウインドウとの間でデータの受け渡しができます。
参照や代入を実行するタイミングはいつでも構いません。(ただし、実際にデータが受け渡されるのは、「サブウインドウが開いたとき」と、「サブウインドウを閉じたとき」の2回のみです。リアルタイムに常時やりとりされるわけではありません。)

ちなみに、「document.bgColor」は背景色、「document.fgColor」は文字色です。

というわけで、メインウインドウ(呼び出し側)とサブウインドウとの間でデータのやりとりをするモーダルダイアログの開き方を解説しました。
サブウインドウを開いて、何らかの補助的な処理をさせたい場合に活用して下さい。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど