親ファイルから、iframeのファイルを操作したい

質問の内容を少し修正しました。

実現したいこと

親ファイルのボタンをクリックすると、iframeのファイル内の<details>が開閉するようにしたいです。

（ローカル環境で、jQueryを使わずに実現したい。）

javascriptは初心者です。よろしくお願いいたします。

困っていること

下記ソースのように、一つのファイルだと正常に動作するのですが、
ファイルを分割する（iframe）と、ボタンをクリックしても<details>が開閉しません。

イメージ

一つのファイルだと正常に動作する

iframeを使うと、ボタンをクリックしても開閉しない

ソースコード（一つのファイルだと正常に動作する。＜その１＞）

html
1<html>
2<body>
3
4<button type="button">全てのメニューを開く</button>
5<button type="button">全てのメニューを閉じる</button>
6
7<details>
8<summary>メニュー1</summary>
9<ul>
10<li>りんご</li>
11<li>みかん</li>
12</ul>
13</details>
14
15<details>
16<summary>メニュー2</summary>
17<ul>
18<li>いか1</li>
19<li>たこ</li>
20</ul>
21</details>
22
23<script type="text/javascript">
24
25var buttons = document.querySelectorAll('button');
26
27buttons[0].addEventListener('click', function(event) {
28    var details = document.querySelectorAll('details');
29    for (var i = 0; i < details.length; i++) { 
30    details[i].setAttribute('open', 'open');
31  }
32}, false);
33
34buttons[1].addEventListener('click', function(event) {
35  var details = document.querySelectorAll('details');
36  for (var i = 0; i < details.length; i++) {
37    details[i].removeAttribute('open');
38  }
39}, false);
40
41
42var target = details[i];
43if (target.hasAttribute('open')) {target.removeAttribute('open');} 
44else {target.setAttribute('open', 'open');}
45
46</script>
47
48</body></html>

ソースコード（一つのファイルだと正常に動作する。＜その２＞）

※教えて頂いたscript使ってます（感謝）

html
1<html>
2<body>
3
4<button type="button" onclick="details_open(true)">全てのメニューを開く</button>
5<button type="button" onclick="details_open(false)">全てのメニューを閉じる</button>
6
7<details>
8<summary>メニュー1</summary>
9<ul>
10<li>りんご</li>
11<li>みかん</li>
12</ul>
13</details>
14
15<details>
16<summary>メニュー2</summary>
17<ul>
18<li>いか1</li>
19<li>たこ</li>
20</ul>
21</details>
22
23<script type="text/javascript">
24
25 const details_open = (flg) =>{ const dtls = document.querySelectorAll('details'); 
26 dtls.forEach(x=>x.open=flg);
27}
28
29</script>
30</body></html>

iframeを使うと、ボタンをクリックしても開閉しない。

親のHTML

html
1<!DOCTYPE html>
2<html>
3<head>
4</head>
5<body>
6<button type="button" onclick="details_open(true)">iframe内の全てのメニュ-を開く</button>
7<button type="button"  onclick="details_open(false)">iframe内の全てのメニュ-を閉じる</button>
8<br>
9<iframe src="sub_fm.html" id="id_ifrem"  title="sub-ifrm"></iframe>
10
11<script type="text/javascript">
12 const details_open = (flg) =>{ const dtls = document.querySelector('#id_ifrem').contentWindow.document.querySelectorAll('details'); 
13 dtls.forEach(x=>x.open=flg);
14}
15</script>
16</body>
17<html>

子（iframeの中）のHTML

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>sub-ifrm</title>
5</head>
6
7<body>
8<details>
9<summary>メニュー1</summary>
10<ul>
11<li>みかん</li>
12<li>いちご</li>
13</ul>
14</details>
15
16<details>
17<summary>メニュー2</summary>
18<ul>
19<li>いか</li>
20<li>たこ</li>
21</ul>
22</details>
23</body>
24</html>

kuma_kuma_

2020/10/13 16:06

質問者様コードは「コードの挿入」を使って囲んで下さい。（あとから編集できますよ）

mikan-ponkan

2020/10/13 16:20

修正いたしました。ご指摘ありがとうございます。

miyabi_pudding

2020/10/13 16:55

ご自身で調べてみたのでしょうか？？

m.ts10806

2020/10/13 20:02

現在のコードにおける問題点は何でしょうか。

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

回答2件

javascript
1const details_open=(flg)=>{
2  const dtls=document.querySelector('#id_ifrem').contentWindow.document.querySelectorAll('details');
3  dtls.forEach(x=>x.open=flg);
4}

codepen iframe control

投稿2020/10/14 01:04

編集2020/10/15 00:22

yambejp

総合スコア116724

yambejp

2020/10/14 01:05

ボタンはこんなかんじ <button type="button" onclick="details_open(true)">開く</button> <button type="button" onclick="details_open(false)">閉じる</button>

mikan-ponkan

2020/10/14 14:36

夜の空いた時間にやっているので、ご返事が遅れて申し訳ありません。こんなに、コンパクトなコードにできるんですね！調べたら、ES2015から使えるようになった書き方なんですね。早速、教えて頂いた通りに書き換えてみましたが、うまく動きませんでした。もう少し頑張ってみます。

yambejp

2020/10/15 00:23

codepenにサンプルあげときました

mikan-ponkan

2020/10/15 14:10

ご回答ありがとうございます。「CodePen」というサービスがあるのですね！初めて知りました！上げていただいたコードを、CodePen上で試してみては？というご提案なのでしょうか。 CodePenの使い方が、まだ理解できていないので調べてみます。（そこからのレベルです。）とりあえず登録はしてみました。使いこなせるようになればすごく役に立ちそうです。明日早いので、今日はこれだけで終わってしまいそうです。続きは明晩以降やります。ご指導感謝いたします。m(__)m

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