Edgeブラウザにて子画面から親画面に値を受け渡す処理

前提・実現したいこと

モーダル画面機能がEdgeブラウザで廃止されたので、Edgeブラウザで子画面から親画面に値javascriptで受け渡したい

発生している問題・エラーメッセージ

window.opener[callback_id] is not a function

該当のソースコード

親画面.html

<script type="text/javascript" src="子画面から親画面に値渡し.js"></script>
<meta charset="UTF-8">
<body>
<input type="button" value="変更" onClick="ButtonClick()" />
</body>
<script type="text/javascript">

//変更ボタン押下時の処理
function ButtonClick(){


var callback_id = 'callback_modal';
window[callback_id] = function(ret) {
		
//trueが表示されることを確認
alert(ret.status);
return ret ? ret : {"status":false };

}

//子画面ウインドウを開く
//var ret = openChild("子画面.html");
var ret = openChild("子画面.html",window[callback_id]);


//（ここ処理が通るのを確認したい）
if(ret.status) {
	alert(ret.status);
}
}
</script>

小画面から親画面に値渡し.js

//モーダル画面呼び出し
//function openChild(url) {
function openChild(url,callback) {
	return openDialog(url,900,680,callback);
}

//function openDialog(url,width,height){
function openDialog(url,width,height,callback){


//var callback_id = 'callback_modal';
//window[callback_id] = function(ret) {
		
////trueが表示されることを確認
//alert(ret.status);
//return ret ? ret : {"status":false };

//}

　　//小画面呼び出し
      var ret window.open(url, callback,  
　　 "dialogWidth:" + width + "px;" + 
　　"dialogHeight:" + height + "px;" +
      "center:yes; scroll:no;");

       return ret;
}

小画面.html

<input type="button" value="確定"    
  onClick="ButtonClick()">
<meta charset="UTF-8">
<script type="text/javascript">

//確定ボタン押下時
function ButtonClick(){
	var ret = { "status" : true };
	var callback_id = window.name;
	window.opener[callback_id](ret);
	window.close();

</script>

試したこと

https://qiita.com/hidehito108/items/f7ad9fe23736049a76d6
上記のサイトを参考にして、作業してみたのですがうまくいかず
htmlファイル2つでの値を受け渡す処理の記事は結構出てきたのですが、jsファイルを挟んで処理する
例は探してもなかったので、少し勝手が違うのでしょうか？

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
サーバー言語:java
ブラウザ:chromium版 Edge IEモード
デスクトップ上に置いてもエラーを吐くようなのでapache2.4.43をインストールしてローカルサーバー上にhtml,jsを設置して動作確認中

int32_t

2021/09/03 13:14

サーバは関係ないので、「Java」「Apache」のタグは消してください。

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

回答1件

ベストアンサー

関数 openDialog() が何を返すか確認しましょう。

js
1function openDialog(url,width,height){
2  ...
3  window[callback_id] = function(ret) {
4    ...
5    return ret ? ret : {"status":false };
6  }
7  window.open(...)
8}

この関数、何もreturnしていません。よって、返り値を代入すると undefined になります。
この中に書かれている無名関数のreturnの値はどこに行くかというと、

js
1    window.opener[callback_id](ret);

子画面のこのコードの返り値になります。

非同期な動作なので、関数 ButtonClick() の中で ret の値を返り値として受け取ることはできないのです。
(Promise と async await を使うと可能ですが、IE モードではダメでしょう)

ret を使ってやりたい処理は、上記の無名関数の中に書くか、openDialog() にコールバック関数を渡すなどする必要があります。

投稿2021/09/03 00:23

int32_t

総合スコア20882

gapmjgmpt

2021/09/03 09:15

回答ありがとうございます。改修の都合上、親画面でretの値を触りたいのでopenDialog()にコールバック関数を渡すという手法を試してみます上記のように修正してみましたがエラーメッセージも変わりましたそもそも親画面の記述でコールバック関数を定義してopenChild関数呼び出し時の引数にコールバック関数を用いるという認識なのですが合ってますか？正直、どういう処理を意図してコールバック関数をopenDialog()の引数に使うのかイメージが湧いてこないですコールバック関数を複数定義しなければならないということではないですか？

int32_t

2021/09/03 12:53 編集

現在のコードで var ret window.open(url, callback, を var ret = window.open(url, 'callback_modal', に修正すれば動くんじゃないでしょうか。window.open() の第2引数はウィンドウ名の文字列です。回答を書いた時点では、以下のような修正を想定していました: * openDialog() に callback 引数を足し、中の無名関数から callback(ret) を呼ぶ。または window[callback_id] に callback を代入する * openChild() に callback 引数を足し、openDialog() に渡す * ButtonClick() は openChild() に ret を処理するコールバック関数を渡す

gapmjgmpt

2021/09/03 17:07 編集

ご回答誠にありがとうございます上記のようにそもそもopenchildの第二引数をcallback_idを指定したら小画面も閉じるようになりエラーもなくなりましたただ、openchild関数の後ろのアラート関数については、ここのif分を外して確認したのですが小画面の処理よりも先に後ろのalert処理が走るようなので、retの値を触りたい時は無名関数内で触るのが現実的なのかと思いました(ここのアラート処理は確認済み) ret.statusが未定義ですというエラーも厳密な条件はよく分かりませんが記述によって出る時もあれば出ないときもあるみたいです(ここの記述はなくても改修に影響はないと踏んでいます) 無名関数内で触れれば他の関数で不要なreturn記述も必要ないかと思っていますご協力ありがとうございました

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