子画面のModalを閉じたい

度々失礼します。
下記のソースで子画面の閉じるボタンを押したときにshowModalを閉じたいのですが、
やり方がわからず困っております。

contentWindow.documentで子画面の要素を取れるみたいなのですがうまくいきませんでした。
どのように実装すれば子画面を閉じれますでしょうか？
よろしくお願い致します。

--parent.html--
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="oya">
<p>親</p>
<div><button id="call_child">子呼び出し</button></div>

<input type="text" placeholder="入力内容がiframe内に反映されます。" />
<button id="exe1">実行</button>
<div id="oya-result">結果がここに反映されます。</div>
</div>

<script type='text/javascript' src='//code.jquery.com/jquery-2.2.4.min.js'></script>
<script type="text/javascript">

$(function() {
	$(document).on('click', '#call_child', function() {
		const dialog = document.body.appendChild(document.createElement('dialog'));
		dialog.innerHTML = '<iframe id="inner_elem" src="child.html" style="border: 0; width:400px; height:200px;"></iframe>';
		dialog.showModal();
	});

	$(document).on('click', '#exe1', function() {
		$('#child-frame').contents().find('#ko-result').text($('#oya input').val());
	});
});

</script>
</body>
</html>


--child.html--
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>

<body id="children">
<p>iframe内</p>
<div id="ko">
<p>子</p>
<div><button id="btn_close">閉じる</button></div>
<input type="text" id="" placeholder="入力内容が親ページに反映されます。" />
<button id="exe2">実行</button>
<div id="ko-result">結果がここに反映されます。</div>
</div>

<script type='text/javascript' src='//code.jquery.com/jquery-2.2.4.min.js'></script>
<script type="text/javascript">
$(function() {
	$(document).on('click', '#exe2', function() {
		$('#oya-result' ,parent.document).text($('#ko input').val());
	});
});
</script>
</body>
</html>

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

回答2件

自己解決

$('#inner_elem').on('load', function()
onイベントを使わないと中身が出来ていないので取得できないみたいですね。
とりあえずこれで閉じることが出来ました。

	$(document).on('click', '#call_child', function() {
		const dialog = document.body.appendChild(document.createElement('dialog'));
		dialog.innerHTML = '<iframe id="inner_elem" src="iframe_test6-2.html" style="border: 0; width:400px; height:200px;"></iframe>';
		dialog.showModal();

		$('#inner_elem').on('load', function() {
			const doc = document.getElementById('inner_elem').contentWindow.document;
			const btn = doc.getElementById('btn_close');
			btn.addEventListener('click', function() {
				dialog.close();
			});
		});
	});

投稿2020/12/25 07:36

takao99

総合スコア26