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

総合スコア21597

2021/08/23 08:01

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

2021/08/23 08:22 編集

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

2021/08/23 08:23

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

2021/08/23 08:34

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

2021/08/23 08:54

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

2021/08/27 15:49

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

行動規範の内容に同意します

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

総合スコア116439

2021/08/23 07:31

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

2021/08/23 07:33

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

2021/08/23 08:15

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

2021/08/23 08:18 編集

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

2021/08/23 08:32

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

2021/08/23 08:46

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

2021/08/23 08:57

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