にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

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

サブウインドウ側で何らかの補助的な処理をする場合、親ウインドウから子ウインドウへデータを送り、子ウインドウから親ウインドウへデータを戻す……という処理が必要です。JavaScriptのshowModalDialogメソッドを使って開いたサブウインドウ(モーダルダイアログ)なら、データのやりとりは簡単です。(※既に廃止された仕様なので、今後は使えないブラウザが増す点に注意)

※非推奨:廃止済み

ここで紹介しているwindow.showModalDialogメソッドは、既に仕様から廃止されています。本稿執筆時点では、Firefox54ではまだ使用可能でしたが(将来的に廃止されることがアナウンスされています)、ChromeやEdgeでは使えません(IE11では動きますが)。したがって、もはや限定された環境でしか使えない点に注意して下さい。

閉じるまで他の操作をできなくするウインドウ(モーダルダイアログ)を開く方法

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つ作っているだけです。

HTMLソース

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

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

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

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

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;

}

上記の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ソースを、以下のように記述します。

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();
}

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

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

この2点さえ知っておけば、親ウインドウとの間でデータの受け渡しができます。
参照や代入を実行するタイミングはいつでも構いません。(ただし、実際にデータが受け渡されるのは、「サブウインドウが開いたとき」と、「サブウインドウを閉じたとき」の2回のみです。リアルタイムに常時やりとりされるわけではありません。)
ちなみに、「document.bgColor」は背景色、「document.fgColor」は文字色です。
というわけで、メインウインドウ(呼び出し側)とサブウインドウとの間でデータのやりとりをするモーダルダイアログの開き方を解説しました。
サブウインドウを開いて、何らかの補助的な処理をさせたい場合に活用して下さい。

冒頭でも述べましたが、ここで紹介したwindow.showModalDialogメソッドは、既に仕様から廃止されています。もはや限定された環境でしか使えない点に注意して下さい。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---