親画面とiframe内の子画面でのデータの受け渡し方法

###前提・実現したいこと
showModalDialog()を使用しているwebアプリケーションがあり、
現在、jQuery UI dialogでの改修を行っています。

別ページの動的HTMLをモーダルダイアログで表示していたため、
iFrameを使用し、ダイアログ内に表示するようにし、
呼び出し元の親画面とiframe内の子画面とでデータの受け渡しを行いたいと思っています。

子画面では親画面からの引数によって、
検索処理がはしり、初期値をセットしたりしています。

下記の例では引数によってラジオボタンorチェックボックスの判断をしたいのですが、
親画面から子画面に引数を渡す部分で問題があります。
どこを直したら良いでしょうか？

なるべく元々のソースをいじらないように改修したいと思っています。
jQuery初心者でして、スムーズな方法ではないかもしれませんが、
何かわかりましたらご教示のほどよろしくお願いいたします。
もしくは他に良い方法はありますか？

###発生している問題・エラーメッセージ
・ダイアログオープン時にalert()を入れないと、
$("#iframe_win").contents()～が動作しない（値がセットされない）
・ダイアログ表示時、値がセットされるが子画面で再度検索処理を行うと引数の値が消えてしまう

###該当のソースコード
●AAA.jsp（呼び出し元親画面）抜粋●

JSP
1・・・・・・・・・・・
2<script language="JavaScript">
3<!--
4jQuery(function($){
5
6	// 「検索」ボタンを押した時の処理
7	$("#kensaku")
8		.attr("type","button")
9		.val("名前検索")
10		.click(function(){
11		
12			$( "#dialog-iframe" ).dialog({
13				title: "名前検索",
14				width: 1050,
15				modal: true,
16				open: function(event, ui) {
17
18					//ここでalertを入れないとcontents()～が動作しない
19					alert("ダイアログオープン");
20					$("#iframe_win").contents().find("[name=maxSelection]").val("1");
21
22				},
23				buttons: {
24					"選択": function (event) {
25
26						//検索画面の「選択」ボタン押下時のメソッドを実行
27						document.getElementById("iframe_win").contentWindow.add();
28
29						//検索画面で選択された姓＋名を親画面にセット
30						$("#namae").val($("#iframe_win").contents().find("[name=selectSei]").val()+
31										$("#iframe_win").contents().find("[name=selectMei]").val());
32
33						//ダイアログを閉じる
34						$(this).dialog("close");
35					},
36					"キャンセル": function () { $(this).dialog("close"); }
37				},
38				close: function () { $(this).dialog("destroy"); }
39			});
40		});
41})
42// -->
43</script>
44
45・・・・・・・・・・・
46
47<body class="test">
48
49	<html:form action="/AAA" method="post" onsubmit="return func()">
50
51	<!--ダイアログの内容-->
52	<div id="dialog-iframe" title="" style='display:none;'>
53	<iframe
54		src="<%=request.getContextPath()%>/BBB.do?action="
55		name="iframe_win"
56		id="iframe_win"
57		frameborder="0"
58		scrolling="auto"
59		width="1000"
60		height="550"
61		style=''
62	></iframe>
63	</div>
64
65	<!--子画面からの返却値をセットするテキストボックス-->
66	<html:text name="AAAForm" property="seimei" styleId="namae" size="80"/>
67
68	<!--検索ダイアログを呼び出す検索ボタン-->
69	<input id="kensaku">
70
71	</form>
72</body>
73・・・・・・・・・・・
74

●BBB.jsp（子画面）抜粋●

JSP
1・・・・・・・・・・・
2
3<script language="JavaScript">
4<!---
5function add() {
6	// 返却値用を作成する
7	var ret = new Array();
8
9	// チェック状態の取得
10	var selectCheck = document.forms[1].selection.checked;
11	// 名前が選択されているか
12	if (document.forms[1].selection.length) {
13		// 選択項目が複数ある
14		// チェック状態をfalseに設定
15		selectCheck = false;
16		// 個数分ループ
17		var retCount = 0;
18		for (i = 0; i < document.forms[1].selection.length; i++) {
19			// 選択されているかチェック
20			if (document.forms[1].selection[i].checked) {
21				// 選択されていればその状態を取得する
22				selectCheck = true;
23				ret[retCount] = new Array();
24				ret[retCount][0] = document.forms[1].test0[i].value;
25				ret[retCount][1] = document.forms[1].test1[i].value;
26				ret[retCount][2] = document.forms[1].test2[i].value;
27				
28				//*****jQuery用に追加した処理（親画面に返却する値）********************
29				document.forms[1].selectSei.value = ret[0][1];
30				document.forms[1].selectMei.value = ret[0][2];
31				//*****jQuery用に追加した処理（親画面に返却する値）********************
32
33				retCount++;
34			}
35		}
36	} else {
37		// 選択項目が1つしかない
38		ret[0] = new Array();
39		ret[0][0] = document.forms[1].test0.value;
40		ret[0][1] = document.forms[1].test1.value;
41		ret[0][2] = document.forms[1].test2.value;
42
43		//*****jQuery用に追加した処理（親画面に返却する値）********************
44		document.forms[1].selectSei.value = ret[0][1];
45		document.forms[1].selectMei.value = ret[0][2];
46		//*****jQuery用に追加した処理（親画面に返却する値）********************
47	}
48
49	// 選択されていたかチェック
50	if (!selectCheck) {
51		// メッセージを表示
52		alert("追加したいデータを選択してください。");
53		return;
54	}
55}
56
57//--->
58</script>
59
60・・・・・・・・・・・
61
62<body class="test">
63<html:form action="BBB" method="post" onsubmit="return func()">
64<input type="hidden" name="action" value="">
65<input type="hidden" name="selectSei" value="">
66<input type="hidden" name="selectMei" value="">
67
68<table class="bgtable" cellSpacing="1" cellPadding="3" width="100%">
69	<TR class="tablehead" align="center">
70		<TD width="10%">選択</TD>
71		<TD width="45%">姓</TD>
72		<TD width="45%">名</TD>
73	</TR>
74
75	<logic:iterate id="dataBean" property="list" name="BBBForm" indexId="index" type="BBBBean">
76	    <html:hidden property="test0" name="dataBean"/>
77	    <html:hidden property="test1" name="dataBean"/>
78	    <html:hidden property="test2" name="dataBean"/>
79
80	<TR class="tabletext" align="center">
81		<TD>
82			<logic:equal name="BBBForm" property="maxSelection" value="1">
83				<!--maxSelectionが"1"だったら「選択」をラジオボタンにする-->
84				<html:radio property="selection" value="<%=dataBean.getKeycd()%>"/>
85			</logic:equal>
86			<logic:notEqual name="BBBForm" property="maxSelection" value="1">
87				<!--maxSelectionが"1"以外だったら「選択」をチェックボックスにする-->
88				<html:checkbox property="selection" value="<%=dataBean.getKeycd()%>"/>
89			</logic:notEqual>
90		</TD>
91		<TD>
92			<bean:write property="namae_Sei" name="dataBean"/>
93		</TD>
94		<TD>
95			<bean:write property="namae_Mei" name="dataBean"/>
96		</TD>
97	</TR>
98	</logic:iterate>
99</TABLE>
100
101</html:form>
102</body>
103
104・・・・・・・・・・・
105

###補足情報(言語/FW/ツール等のバージョンなど)
JAVA
jQuery
Struts

kei344

2018/01/12 17:23

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

espresso

2018/01/13 06:10

ご指摘ありがとうございます。使い方がわかっておらず申し訳ございません。ご指摘の通り修正いたしました。

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

回答2件

ベストアンサー

js
1// 動作確認してないが
2$('#iframe_win').load(function(){
3    $("#iframe_win").contents().find("[name=maxSelection]").val("1");
4});

iframe load 後に処理するとか？

投稿2018/01/15 06:50

退会済みユーザー

総合スコア0

espresso

2018/01/16 18:50

ご回答ありがとうございます。アドバイス頂きました通り、iframe load後、に変更したところ正常に動作しました！ jQueryの処理する流れ（順番）があまりわかっていないのでもっと勉強しようと思います。大変助かりました。ありがとうございました！

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

jQuery UI dialog もいいのですが、できるだけ変更したくないのであれば、window.open()ではないでしょうか？
この案は却下されましたか？
https://developer.mozilla.org/ja/docs/Web/API/window.open

投稿2018/01/12 08:03

x_x

総合スコア13749

espresso

2018/01/12 08:42

ご回答ありがとうございます。この改修を引き継ぐ際にjQueryでとお願いされていたため確認しておりませんでした。改修は最新のEdgeブラウザで動作するよう進めていくため、また引き継ぐ前にwindow.openでは問題があったのかもしれません。 window.openでもモーダルっぽく動作するようにできるのですね。今１度window.openで実現できるか確認してみます！もしwindow.openで問題があったら再度その問題とともに質問させて頂きたいと思います。

espresso

2018/01/13 08:08

window.open()でなんとか対応できそうです。ただ、子画面への引数が20個近くある画面もあり配列で渡していますが、 window.open()で引数を配列で渡す方法、もしくは複数の引数を渡す方法を調べています。クエリ文字で複数渡すのが一番スムーズかと思いますが、引数の数が多いためそれでよいか悩んでいます。他に良い方法はありますでしょうか？

x_x

2018/01/15 02:04

jQueryを使っているようなので、フォーム内データなら.serialize()を使ってみてはどうでしょうか？ https://api.jquery.com/serialize/ https://qiita.com/tk3fftk/items/22bf451f3051804b142d

退会済みユーザー

2018/01/15 03:02

なんというか… 妙竹林な顧客が特に考えも無しにこれ使ってといったのが発端のような… window.open中に親画面を操作させない方法が思い付かなかったからか、 javascriptモーダルダイアログのサポートの狭さからかも考えられるな。

x_x

2018/01/15 03:10

showModalDialogはもう何年も前からやめるといっていて2016年には実際に廃止され始めているのがいまだに残っているということから考えると、相当古いシステムだと思われます。そしてその改修がいまということから、ろくに使われていなかった機能の問題に今頃気づいたということではないでしょうか？憶測ですが。レガシーIE依存もたくさんありそうですね。

退会済みユーザー

2018/01/15 06:45

クロム：廃止キツネ：非推奨（廃止予定）ゲイツ：放置てとこかな今のところ

x_x

2018/01/15 06:53

Firefoxならどこよりも早くやめていた気がします。 https://www.fxsitecompat.com/ja/docs/2015/showmodaldialog-has-been-disabled-in-multi-process-firefox/ ああ、2015年ですねこれ。 Edgeも最初から搭載していないですし。IEはまあ……

退会済みユーザー

2018/01/15 07:10

ああ・・ https://developer.mozilla.org/ja/docs/Web/API/Window/showModalDialog 更新されてないのか Mozilla は、このメソッドのサポートを廃止する予定であると公表しました (バグ 981796)。時期は、Firefox 46 より前ではないだろうとしています。すなわち、2016 年 6 月中旬頃までは使用できる予定です。ESR リリースは、さらに数か月間サポートするでしょう。

espresso

2018/01/16 18:45

x_xさん、asahina1979さん、ありがとうございます。仰る通りとても古いシステムです。IEのみ対応として作られたようで、IEのバージョンがあがり動かなくなった部分は、互換表示で対応してもらっていたようです（多くはなかったので）。現場の環境をWin10、Edgeにするということで対応を迫られたという感じです。 showModalDialogはだいぶ前からどのブラウザでも廃止されているのですね。今回の新環境移行に伴い、システムのバージョンアップも検討している中での依頼でした。そしてx_xさんのご提案頂いた.serialize()で対応できました！ただ、asahina1979さんのアドバイス（iframeのロード後にセット）でjQuery UI dialogでも正常に動作しましたので、今回そちらで対応したいと思います！大変助かりました。本当にありがとうございました！

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

あなたの回答