動的に作られたiframe内の要素の取得方法

appendChildで追加したdialogのiframeの中身が取得できなくて困っています。
inner_btnがクリックされたらresultにchild2を表示するところをどのようにすれば実現できますでしょうか？
よろしくお願いします。

--parent.html
<!DOCTYPE html>
<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title></title>
</head>
<body>

<div id="result"></div>
<input type="button" id="btn1" value="ダイアログを開く">	
	
<script type='text/javascript' src='//code.jquery.com/jquery-2.2.4.min.js'></script>
<script type="text/javascript">

const btn1 = document.getElementById('btn1');

btn1.addEventListener('click', function(event) {
  const ret = showModalDialog("child1.html");
});

function showModalDialog(url) {
  const dialog = document.body.appendChild(document.createElement('dialog'));
  dialog.innerHTML = '<iframe id="inner_elem" src="' + url + '" style="border: 0; width:600px; height:500px;"></iframe>';
  dialog.showModal();
}

//inner_btnがクリックされたらresultにchild2を表示する

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

--child1.html
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="Javascript:init();">
<form>
  <input type="button" id="inner_btn" value="値を渡す">
</form>

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

function init() {
  $.ajax({
    url: 'child2.html',
    dataType : 'html',
  }).done(function(output){
    $('#txt1').html(output);
    window.returnValue = 'aaa';
  }).fail(function() {
    alert("fail");
  });
}
</script>

<div id="txt1"></div>

</body>
</html>

--child2.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>child2</p>
  </body>
</html>

m.ts10806

2020/12/20 05:33

動的でなければできるのでしょうか。状況説明願います。あと「動的」がどのような構造になっているかにもよります。

takao99

2020/12/20 08:17

ボタンを押すまで中身がないので下記のようにすると Uncaught TypeError: Cannot read property 'addEventListener' of null となります。 const inner_btn = document.getElementById('inner_btn'); inner_btn.addEventListener('click', function() { alert('ボタンが押されました'); });

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

回答1件

ベストアンサー

iframe要素内のdocumentオブジェクトを取得するには、element.contentDocumentを使用します。
iframe内のイベントを親ページのスクリプトで処理するのはちょっと特殊な動作になるので、解説しているサイトを参考に方針を決めてください。
https://s8a.jp/javascript-event-iframe
https://webplus8.com/javascript-iframe-parent-child/
また、iframeを使わないで済むならそちらをお勧めします。

投稿2020/12/20 08:39

gasbombe

総合スコア204

takao99

2020/12/21 00:13

下記のようにするとinner_btnがnullになってしまい困っています。 function showModalDialog(url) { const dialog = document.body.appendChild(document.createElement('dialog')); dialog.innerHTML = '<iframe id="inner_elem" src="' + url + '" style="border: 0; width:600px; height:500px;"></iframe>'; dialog.showModal(); var doc = document.getElementById("inner_elem").contentWindow.document; const inner_btn = doc.getElementById('inner_btn'); console.log(inner_btn); //null }

gasbombe

2020/12/21 15:05

確認しました。 inner_btn = の行が実行されるタイミングで、まだiframeの中身の読み込みが終わってないからですね。以下のように変更すればinner_btnが取得できます。 function showModalDialog(url) { const dialog = document.body.appendChild(document.createElement('dialog')); dialog.innerHTML = '<iframe id="inner_elem" src="' + url + '" onload="CompleteLoadDialog();" style="border: 0; width:600px; height:500px;"></iframe>'; dialog.showModal(); } function CompleteLoadDialog() { var doc = document.getElementById("inner_elem").contentWindow.document; const inner_btn = doc.getElementById('inner_btn'); console.log(inner_btn); //input要素 }

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