質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

5278閲覧

子画面で選択した値をjson形式で呼び元に返したい。(「window.showModalDialog」をChromeで動作するよう代替え案として「window.open」で実装を検討)

y1_tsuru

総合スコア0

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/08/23 07:07

編集2021/08/24 01:18

Javascriptのwindow.showModalDialogおよびwindow.openについての質問です。

今まではIEで動かしていたシステムのChromeで動くように修正したいと思っております。

現状だと子画面からの戻り値をreturnValueで値を取得しています。
returnValueで取得する値がコードや名称でjsonで返し、後続の処理で「<json>.コード」のようにして使用しています。

window.showModalDialogの代替え案としてwindow.openで子画面を表示することはでき、子画面での選択した値を親画面の特定の要素に入れることはできましたが、求めてる動作とは違うので、どうにかjsonのような形式で値を返したいです。

window.openで開いた子画面での選択値を、window.showModalDialogのwindow.returnvalueのように指定したもので呼び元に返す方法があればご教示お願い致します。

<呼び元>
//検索画面open
var ret = window.showModalDialog(url, window, param);

//取得値セット
if (ret != null) {
cdObj.value = ret.コード
}

<呼び先>
var ret = { "コード": "", "名称":""}

ret.コード = document.getElementById("code" + selectIdx).value;
ret.名称 = document.getElementById("name" + selectIdx).value;

window.returnValue = ret;
window.close();

javascript

1親画面より子画面を呼び出し、子画面で選択した値が、親画面に反映される。 2 3----------------------------------------------- 4画面A(親画面)(A.js) 5//---- * 商品検索ボタン押下 6btnShohinCd.click(function (e) { 7//商品検索画面OPEN 8shohinOpenSearchDispCmn(this, "1") 9}); 10 11//--* 商品検索画面OPEN共通 12function shohinOpenSearchDispCmn(me, mode) { 13// 引数設定 14var ret; 15var cdObj = getObjIDReplace(me, 'btn', 'txt').get(0); 16var hdnObj = getObjIDReplace(me, 'btn', 'hdn').get(0); 17var nmObj = $(me).parents('#trMain').find("[id*=txtShohinNm]").get(0); 18 19// 検索画面呼出 20ret = openShohinSerchBase(cdObj, hdnObj, nmObj, mode); 21 22//戻り値が「NULL」「エラー」の場合処理終了 23if (ret == null) { return false; } 24if (ret.err_msg != "") { return false; } 25 26cdObj.value = ret.コード 27 28} 29----------------------------------------------- 30共通(共通.js) 31function openShohinSerchBase(cdObj, hdnObj, nmObj, mode, searchFlg) { 32//パラメータ設定 33var url = "~"; //子画面URL 34var param = "dialogHeight:~px; dialogWidth: ~px; scroll: 0; status: 0; resizable: 0;"; 35 36//検索画面OPEN 37var ret = openSerchDispCmn(url, param, cdObj, hdnObj, nmObj); 38if (ret != null) { 39//コードバックアップ 40var cdBk = ret.コード; 41//URL設定 42var url = '~'; 43//引数設定 44var param = { 45コード: ret.コード 46名称: ret.名称 47} 48ret = setDataCmn(url, param, cdObj, hdnObj, nmObj, false) 49 50//コード再設定 51cdObj.value = cdBk; 52hdnObj.value = cdBk; 53} 54 55//項目選択 56selectCharStr(cdObj); 57return ret; 58} 59 60function openSerchDispCmn(url, param, cdObj, hdnObj, nmObj) { 61//検索画面open 62var ret = window.showModalDialog(url, window, param); //画面B(子画面)のURLを引数とし、子画面OPEN 63 64//取得値セット 65if (ret != null) { 66cdObj.value = ret.コード 67} 68//変更チェック設定 69if (ret != null && ret.コード != "") { 70onChkSentaku(cdObj); 71} 72return ret; 73} 74----------------------------------------------- 75画面B(子画面)(B.js)抜粋 76↓子画面で検索し、表示された一覧のコードを選択した際の処理。 77 78var ret = { "コード": "", "名称":""} 79 80ret.コード = document.getElementById("code" + selectIdx).value; 81ret.名称 = document.getElementById("name" + selectIdx).value; 82 83window.returnValue = ret; 84window.close(); 85 86-----------------------------------------------

後続の処理でretを使いたいため、返り値を同じ形式で取得したいです。
ご教示いただきますよう、お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

js

1//検索画面open 2var ret = window.showModalDialog(url, window, param); 3//取得値セット 4if (ret != null) { 5 cdObj.value = ret.コード

こういう同期的な書き方ができなくなった、というのがshowModalDialog()廃止のポイントです。

以下のような非同期的なコードに直す必要があります。

<呼び元>

js

1 // 検索画面open 2 window.open(...); 3 // 必要なら、元画面の色々なものを操作不能にしておく 4} 5 6function subWindowClosed(ret) { 7 // 必要なら、元画面の色々なものを操作可能に戻す 8 // 取得値セット 9 if (ret != null) { 10 cdObj.value = ret.コード 11 } 12 ...

<呼び先>

js

1... 2ret.コード = ...; 3ret.名称 = ...; 4 5window.opener.subWindowClosed(ret); 6window.close();

投稿2021/08/23 07:22

編集2021/08/23 07:25
int32_t

総合スコア20872

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y1_tsuru

2021/08/23 08:01

int32_t さん ご回答いただきありがとうございます。 例まで挙げていただき、助かります。ありがとうございます。 取り急ぎお礼申し上げます。 同期、非同期の理解に乏しく変な質問になってしまうかもですが、質問させてください。 提示いただいた例から、呼び先の子画面で呼び元の別functionを呼びその際にretを渡すことで"取得値セット"を行っていると認識しております。 一旦、仮に取得値セットを行い、window.close();をした後、呼び元に戻り、呼び元で仮にセットした要素からjsonを作り、後続の処理に渡すといったことは可能なのでしょうか。 また、可能だとして実装方法として邪道でしょうか? お手数おかけしますが、回答いただけると幸いです。 よろしくお願い致します。
int32_t

2021/08/23 08:22 編集

なんらかの都合でJSONを作りたいなら、可能ですし好きにすれば良いと思います。 (ただ、質問文のコードのどこにもJSONは見当たらないので、JSONという語になにか誤解がありそうな気がしますが) 最近は window.open() 自体が邪道で、yambejp さんが書いているように <iframe> なりダイアログを出すライブラリなり使うのが主流だと思います。
y1_tsuru

2021/08/23 08:23

int32_t さん 返信いただきありがとうございます。 下記記載をjsonという認識でした。 var ret = { "コード": "", "名称":""} 後続の処理で、retをエラーチェックや存在チェックに多用しており、なるべく後続の処理は変更せず、実装できたらなという考えで実装方法を模索しておりました。 window.open() 自体が邪道なのですね...勉強になります。ありがとうございます。 <iframe>や<dialog>に関して、全然調べることができていないので、そちらも見てみなくてはですね。
int32_t

2021/08/23 08:34

> 下記記載をjsonという認識でした。 それは JavaScript のオブジェクトであって、JSON ではありません。JavaScript のオブジェクトのような構造をテキスト化して、どんなプログラミング言語でも扱えるようにしたデータが JSON です。
y1_tsuru

2021/08/23 08:54

int32_t さん 返信いただきありがとうございます。 そうなんですね...ご指摘いただきありがとうございます。 全然認識違いでした。 子画面で「var ret = { "コード": "", "名称":""}」に値を入れて、returnValueで呼び元に返していたのが、現行の記載となっており、どうにかしてこのretを呼び元に返せれば、後続の処理を記載変えずにそのまま使えるだろうという安直な考えです... 非同期的でないと実装できないとのことでしたが、子画面で呼び元の別functionにretを渡して保持し、子画面がcloseした後、呼び元に処理が戻ってきた際に保持しているretを使い、後続に渡すといったことはできるのでしょうか...
int32_t

2021/08/27 15:49

> ...という安直な考えです... > ...といったことはできるのでしょうか... もちろんできますよ。 既存のコードをこの解答のように書き換えるだけだと思います。試してみましたか?
guest

0

showModalDialogはすでに廃止されているメソッドで、代替はありません
擬似的なモーダルを書いて我慢してください

sample

ちょっと質問の意図と私の認識がちがうようなのでサンプルを上げておきます

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 btn.addEventListener('click',e=>{ 4 dlg.setAttribute('open',1); 5 }); 6 dlg.querySelectorAll('input').forEach(x=>{ 7 x.addEventListener('click',e=>{ 8 hoge.value=e.target.value; 9 dlg.removeAttribute('open'); 10 }); 11 }); 12}); 13</script> 14<dialog id="dlg"> 15<input type="button" value="1"> 16<input type="button" value="2"> 17<input type="button" value="3"> 18</dialog> 19<input name="hoge" id="hoge" value="" readonly> 20<input type="button" id="btn" value="modal">

投稿2021/08/23 07:12

編集2021/08/23 08:44
yambejp

総合スコア114829

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y1_tsuru

2021/08/23 07:31

yambejpさん 回答いただきありがとうございます。 「showModalDialogはすでに廃止されているメソッド」という認識はあり、疑似的なモーダルでの実装を検討しております。 疑似的なモーダルとして、window.openを使用し実装を試みましたが、呼び元の特定の要素に選択値を入れることはできました。 しかし、後続の処理で子画面で選択した値を元にエラーチェックや紐づき情報の取得を行っており、jsonや配列の形式で呼び元に戻す方法がないかと模索中です。 「疑似的なモーダルをwindow.openで実装した場合、呼び元にjsonや配列のような形式で選択値を返したい」というのが要望なのですが、実装方法が分からずteratailを利用致しました。 何か方法があればご教示いただけると幸いです。
yambejp

2021/08/23 07:33

外部のHTMLを読むならiframeに受けるのが簡単かもしれません HTMLの競合がないならdialogタグをつかったりjqueryuiのdialogを利用するとよいでしょう
y1_tsuru

2021/08/23 08:15

yambejp さん 返信いただきありがとうございます。 取り急ぎお礼申し上げます。 「外部のHTMLを読むならiframeに受ける」「HTMLの競合がないならdialogタグをつかったりjqueryuiのdialogを利用するとよい」に関して、理解ができておりません...知識不足で申し訳ありません。 頂いた内容をもとに、自分でも調べてみようと思います。 js内で非同期なコードに修正し、結果的にjsonの形式で呼び元に返すような方式で実装できたらと思っております。 後続の処理を気にしすぎでしょうかね...
yambejp

2021/08/23 08:18 編集

window.openで処理するとモードレスでしか開けないですよね? モーダルということなのでiframeかdialogでの処理を提案しています (疑似)モーダルで選択した結果についてはいかようにでも親HTMLに 返すことは可能です
y1_tsuru

2021/08/23 08:32

yambejp さん 返信いただきありがとうございます。 なるほど... window.openでは明示的にロックなど入れてモーダルかをしなくてはいけないということですね。 邪道といわれる理由もそこなのでしょうね... "モーダル"とwindow.openでの実装が矛盾してるということですね。勉強になります。ありがとうございます。 一旦は疑似モーダルで実装を考えたいと思っております。(センスを疑われてしまうかもですが...) いかようにでも返せるのですね...知識不足でお恥ずかしいです。 呼び元のjsに返すことができれば、js内の後続の処理をそのまま使えるのではという安直な考えです。
yambejp

2021/08/23 08:46

一旦sampleあげておきます。 質問者さんがやろうとしていることと回答の方針が違うような気がします・・・ 方向性が違うようならもう少し仕様を詳しく教えて下さい
y1_tsuru

2021/08/23 08:57

yambejp さん 返信いただきありがとうございます。 sampleまで...お手数おかけしてすみません。ありがとうございます。 違うかもしれません...説明不足で申し訳ありません。 sample確認させていただき、再度質問内容の見直しおよび仕様を展開させていただきます。
y1_tsuru

2021/08/27 01:13

yambejp さん 仕様とコードを追記させていただきます。 ---------------------------- <現仕様> ①共通.js内でwindow.showModalDialogを使い子画面を表示している。(Chromeでは使用不可) ②戻り値をwindow.returnValueで呼び元(共通.js)に戻せる。 ③連想配列(オブジェクト)を戻り値としており、後続の処理で使用している。 <新仕様> ①あらかじめ呼び元(共通.js)の方で、空の連想配列(オブジェクト)を用意する。 ②共通.js内にwindow.openで子画面(疑似モーダル)を開き、子画面内で呼び元(共通.js)の連想配列(オブジェクト)に追加する。(可能かは不明(配列になら追加できるとのサイトは発見済)) ③window.closeで子画面を閉じ、呼び元に戻る。 ④子画面の処理で追記していった連想配列(オブジェクト)を後続処理に使う。 ---------------------------- ・上記の新仕様で不安要素は、②の「子画面内で呼び元(共通.js)の連想配列(オブジェクト)に追加する。」です。  window.openerで行った場合、共通.jsを使う親画面が指定されてしまうと認識しております。 上記の新仕様が実装可能であるか、実装方法をご教示いただければ幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問