《 12:00 PM 公開/更新》
サブウインドウ側で何らかの補助的な処理をする場合、親ウインドウから子ウインドウへデータを送り、子ウインドウから親ウインドウへデータを戻す……という処理が必要です。JavaScriptのshowModalDialogメソッドを使って開いたサブウインドウ(モーダルダイアログ)なら、データのやりとりは簡単です。(※既に廃止された仕様なので、今後は使えないブラウザが増す点に注意)
ここで紹介しているwindow.showModalDialogメソッドは、既に仕様から廃止されています。本稿執筆時点では、Firefox54ではまだ使用可能でしたが(将来的に廃止されることがアナウンスされています)、ChromeやEdgeでは使えません(IE11では動きますが)。したがって、もはや限定された環境でしか使えない点に注意して下さい。
JavaScriptのshowModalDialogメソッドを使えば、閉じるまで他の操作をできなくするウインドウ「モーダルダイアログ」を開くことができます。その方法は、記事「閉じるまで他の操作をできなくするウインドウ(モーダルダイアログ)を開く」で解説しました。別ウインドウ側で「絶対に先に操作して欲しい」処理を書いている場合などに使うと便利です。
さて、このモーダルダイアログは、呼び出し元の親ウインドウとの間で、データの受け渡しが可能です。例えば、
といったことが可能です。(どちらか片方だけでも、両方でも可能。)
以下の枠内に掲載しているボタン『モーダルダイアログ(都道府県選択画面)を開く』をクリックすると、都道府県名の入力を求めるサブウインドウ(モーダルダイアログ)が開きます。その際、下記のように親ウインドウとサブウインドウ間でデータの受け渡しをしています。
実際にサンプルを試してみて下さい。
showModalDialogメソッドを使って(サブウインドウを閉じるまで他の操作を受け付けなくするタイプの)サブウインドウを開く方法については、「閉じるまで他の操作をできなくするウインドウ(モーダルダイアログ)を開く」をご参照下さい。
以下では、そのサブウインドウ(モーダルダイアログ)との間でデータをやりとりする方法だけに絞って解説します。
とはいえ、「showModalDialogメソッドを使って開いたサブウインドウ」と「親ウインドウ」との間でデータをやりとりする方法は、とても簡単です。
要は、(1)配列を送って、(2)文字列を受け取る……というだけです。
記述方法は以下のような感じです。
retString = showModalDialog( 開きたいURL , sendArguments , ダイアログのオプション );
上記の
です。
たったこれだけです。
まあ、簡単ですね。^^;
送るデータは、配列の形にすることで、複数個のデータを一括して送れます。
var sendArguments = new Array( データ1, データ2, データ3, …… );
var retString = showModalDialog( 開きたいURL , sendArguments , ダイアログのオプション );
上記のような感じで配列を作って、それをshowModalDialogメソッドの第2引数に渡してやれば良いでしょう。
では、冒頭に掲載したサンプル「都道府県名の入力サブウインドウ」を作るソースをご紹介致します。
ここでは、
……の順で紹介します。
まず、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を以下のように書きます。
内容は大きく分けて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ソースの内容を簡単に説明すると、以下の通りです。
サブウインドウ側の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ソース
// ▼親ウインドウからデータを受け取る
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点です。
この2点さえ知っておけば、親ウインドウとの間でデータの受け渡しができます。
参照や代入を実行するタイミングはいつでも構いません。(ただし、実際にデータが受け渡されるのは、「サブウインドウが開いたとき」と、「サブウインドウを閉じたとき」の2回のみです。リアルタイムに常時やりとりされるわけではありません。)
ちなみに、「document.bgColor」は背景色、「document.fgColor」は文字色です。
というわけで、メインウインドウ(呼び出し側)とサブウインドウとの間でデータのやりとりをするモーダルダイアログの開き方を解説しました。
サブウインドウを開いて、何らかの補助的な処理をさせたい場合に活用して下さい。
※冒頭でも述べましたが、ここで紹介したwindow.showModalDialogメソッドは、既に仕様から廃止されています。もはや限定された環境でしか使えない点に注意して下さい。
()
(前の記事) « 閉じるまで他の操作をできなくするウインドウ(モーダルダイアログ)を開く方法
前後のJavaScript TIPS
< 旧 ／ 新 >
(次の記事) 数値と3桁カンマ区切り文字列とを相互変換する方法 »
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)
