teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問親ファイルから、iframeのファイルを操作したい

編集履歴

質問編集履歴

5

修正しました

2020/10/17 18:20

投稿

mikan-ponkan
mikan-ponkan

スコア0

title CHANGED
File without changes
body CHANGED
@@ -79,7 +79,7 @@
79
79
  <button type="button" onclick="details_open(true)">全てのメニューを開く</button>
80
80
  <button type="button" onclick="details_open(false)">全てのメニューを閉じる</button>
81
81
 
82
- <details class="t1">
82
+ <details>
83
83
  <summary>メニュー1</summary>
84
84
  <ul>
85
85
  <li>りんご</li>

4

質問の内容をわかりやすくなるように修正しました

2020/10/17 18:20

投稿

mikan-ponkan
mikan-ponkan

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,58 +1,133 @@
1
+ 質問の内容を少し修正しました。
2
+
1
3
  ### 実現したいこと
2
- 過去の質問（※この質問者の方とは別人です。）の応用で、iframeを使った場合について質問します。
3
- 　https://teratail.com/questions/209796
4
4
 
5
5
  親ファイルのボタンをクリックすると、iframeのファイル内の<details>が開閉するようにしたいです。
6
6
 
7
- ローカル環境で、jQueryを使わずにできればよいのですが。
7
+ （ローカル環境で、jQueryを使わずに実現したい。）
8
8
 
9
9
  javascriptは初心者です。よろしくお願いいたします。
10
10
 
11
+ ### 困っていること
12
+
13
+ 下記ソースのように、一つのファイルだと正常に動作するのですが、
14
+ ファイルを分割する（iframe）と、ボタンをクリックしても<details>が開閉しません。
15
+
11
- ### ソースコード
16
+ ### イメージ
17
+ 一つのファイルだと正常に動作する
18
+ ![一つのファイル](a52971835104a7382824f21975c118cc.png)
12
- <!-- ****　親のHTML　*** -->
19
+ iframeを使うと、ボタンをクリックしても開閉しない
20
+ ![iframeを使った場合](6c8f13267aee83af23d3099b91a28f16.png)
21
+
22
+ ### ソースコード（一つのファイルだと正常に動作する。＜その１＞）
13
23
  ```html
24
+ <html>
14
25
  <body>
15
- <button type="button" onclick="function()">iframe内のすべてのメニュ-を開く</button>
16
- <button type="button" onclick="function()">iframe内のすべてのメニュ-を閉じる</button>
17
- <br>
18
- <iframe src="sub_fm.html" id="id_ifrem"></iframe>
19
26
 
27
+ <button type="button">全てのメニューを開く</button>
28
+ <button type="button">全てのメニューを閉じる</button>
29
+
20
- <script>
30
+ <details>
31
+ <summary>メニュー1</summary>
32
+ <ul>
33
+ <li>りんご</li>
34
+ <li>みかん</li>
35
+ </ul>
21
- // ここに入れるscriptがわかりません。
36
+ </details>
37
+
38
+ <details>
39
+ <summary>メニュー2</summary>
40
+ <ul>
41
+ <li>いか1</li>
42
+ <li>たこ</li>
43
+ </ul>
44
+ </details>
45
+
46
+ <script type="text/javascript">
47
+
48
+ var buttons = document.querySelectorAll('button');
49
+
50
+ buttons[0].addEventListener('click', function(event) {
51
+ var details = document.querySelectorAll('details');
52
+ for (var i = 0; i < details.length; i++) {
53
+ details[i].setAttribute('open', 'open');
54
+ }
55
+ }, false);
56
+
57
+ buttons[1].addEventListener('click', function(event) {
58
+ var details = document.querySelectorAll('details');
59
+ for (var i = 0; i < details.length; i++) {
60
+ details[i].removeAttribute('open');
61
+ }
62
+ }, false);
63
+
64
+
65
+ var target = details[i];
66
+ if (target.hasAttribute('open')) {target.removeAttribute('open');}
67
+ else {target.setAttribute('open', 'open');}
68
+
22
69
  </script>
23
70
 
24
- </body>
71
+ </body></html>
25
72
  ```
26
- ****修正したコード（親のhtml）途中経過で未解決　****　↓
73
+ ### ソースコード（一つのファイルだと正常に動作する。＜その２＞）
74
+ ※教えて頂いたscript使ってます（感謝）
27
75
  ```html
28
- <!DOCTYPE html>
29
76
  <html>
30
77
  <body>
31
- <button type="button" onclick="details_open(true)">iframe内のすべてのメニュ-を開く</button>
32
- <button type="button" onclick="details_open(false)">iframe内のすべてのメニュ-を閉じる</button>
33
- <br>
34
- <iframe src="sub_fm.html" id="id_ifrem" title="sub-ifrm"></iframe>
35
78
 
79
+ <button type="button" onclick="details_open(true)">全てのメニューを開く</button>
80
+ <button type="button" onclick="details_open(false)">全てのメニューを閉じる</button>
81
+
82
+ <details class="t1">
83
+ <summary>メニュー1</summary>
84
+ <ul>
85
+ <li>りんご</li>
86
+ <li>みかん</li>
87
+ </ul>
88
+ </details>
89
+
90
+ <details>
91
+ <summary>メニュー2</summary>
92
+ <ul>
93
+ <li>いか1</li>
94
+ <li>たこ</li>
95
+ </ul>
96
+ </details>
97
+
36
98
  <script type="text/javascript">
37
- document.write("テスト：始→　");
38
99
 
39
- const details_open = (flg) =>{
40
- const dtls = document.querySelector('#id_ifrem').contentWindow.document.querySelectorAll('details');
100
+ const details_open = (flg) =>{ const dtls = document.querySelectorAll('details');
41
- dtls.forEach(x=>x.open=flg);
101
+ dtls.forEach(x=>x.open=flg);
42
102
  }
43
103
 
44
- console.log(flg);
45
- document.write("テスト：終");
46
104
  </script>
105
+ </body></html>
106
+ ```
47
107
 
108
+ ### iframeを使うと、ボタンをクリックしても開閉しない。
109
+ 親のHTML
110
+ ```html
111
+ <!DOCTYPE html>
112
+ <html>
113
+ <head>
114
+ </head>
115
+ <body>
116
+ <button type="button" onclick="details_open(true)">iframe内の全てのメニュ-を開く</button>
117
+ <button type="button" onclick="details_open(false)">iframe内の全てのメニュ-を閉じる</button>
118
+ <br>
119
+ <iframe src="sub_fm.html" id="id_ifrem" title="sub-ifrm"></iframe>
120
+
121
+ <script type="text/javascript">
122
+ const details_open = (flg) =>{ const dtls = document.querySelector('#id_ifrem').contentWindow.document.querySelectorAll('details');
123
+ dtls.forEach(x=>x.open=flg);
124
+ }
125
+ </script>
48
126
  </body>
49
127
  <html>
50
128
  ```
51
- ****その結果↓****
52
- ![結果画面](088340efd8eb6cb2f40c31d6789abe1c.png)
53
129
 
54
-
55
- <!-- ****　子のHTML　*** -->
130
+ 子（iframeの中）のHTML
56
131
  ```html
57
132
  <!DOCTYPE html>
58
133
  <html>
@@ -78,28 +153,4 @@
78
153
  </details>
79
154
  </body>
80
155
  </html>
81
- ```
82
-
83
-
84
- **** iframe を使わずに、親子一つのファイルで（分割する前）正常に動作していたscript****
85
- ```javascript
86
- var buttons = document.querySelectorAll('button');
87
-
88
- buttons[0].addEventListener('click', function(event) {
89
- var details = document.querySelectorAll('details');
90
- for (var i = 0; i < details.length; i++) {
91
- details[i].setAttribute('open', 'open');
92
- }
93
- }, false);
94
-
95
- buttons[1].addEventListener('click', function(event) {
96
- var details = document.querySelectorAll('details');
97
- for (var i = 0; i < details.length; i++) {
98
- details[i].removeAttribute('open');
99
- }
100
- }, false);
101
-
102
- var target = details[i];
103
- if (target.hasAttribute('open')) {target.removeAttribute('open');}
104
- else {target.setAttribute('open', 'open');}
105
156
  ```

3

コード修正

2020/10/17 18:12

投稿

mikan-ponkan
mikan-ponkan

スコア0

title CHANGED
File without changes
body CHANGED
@@ -31,7 +31,7 @@
31
31
  <button type="button" onclick="details_open(true)">iframe内のすべてのメニュ-を開く</button>
32
32
  <button type="button" onclick="details_open(false)">iframe内のすべてのメニュ-を閉じる</button>
33
33
  <br>
34
- <iframe src="sub_fm.html" id="id_ifrem"></iframe>
34
+ <iframe src="sub_fm.html" id="id_ifrem" title="sub-ifrm"></iframe>
35
35
 
36
36
  <script type="text/javascript">
37
37
  document.write("テスト：始→　");
@@ -54,6 +54,12 @@
54
54
 
55
55
  <!-- ****　子のHTML　*** -->
56
56
  ```html
57
+ <!DOCTYPE html>
58
+ <html>
59
+ <head>
60
+ <title>sub-ifrm</title>
61
+ </head>
62
+
57
63
  <body>
58
64
  <details>
59
65
  <summary>メニュー1</summary>
@@ -70,8 +76,8 @@
70
76
  <li>たこ</li>
71
77
  </ul>
72
78
  </details>
73
-
74
79
  </body>
80
+ </html>
75
81
  ```
76
82
 
77
83
 

2

アドバイスに従って修正してみた過程を追加しました

2020/10/14 14:59

投稿

mikan-ponkan
mikan-ponkan

スコア0

title CHANGED
File without changes
body CHANGED
@@ -23,8 +23,35 @@
23
23
 
24
24
  </body>
25
25
  ```
26
+ ****修正したコード（親のhtml）途中経過で未解決　****　↓
27
+ ```html
28
+ <!DOCTYPE html>
29
+ <html>
30
+ <body>
31
+ <button type="button" onclick="details_open(true)">iframe内のすべてのメニュ-を開く</button>
32
+ <button type="button" onclick="details_open(false)">iframe内のすべてのメニュ-を閉じる</button>
33
+ <br>
34
+ <iframe src="sub_fm.html" id="id_ifrem"></iframe>
26
35
 
36
+ <script type="text/javascript">
37
+ document.write("テスト：始→　");
27
38
 
39
+ const details_open = (flg) =>{
40
+ const dtls = document.querySelector('#id_ifrem').contentWindow.document.querySelectorAll('details');
41
+ dtls.forEach(x=>x.open=flg);
42
+ }
43
+
44
+ console.log(flg);
45
+ document.write("テスト：終");
46
+ </script>
47
+
48
+ </body>
49
+ <html>
50
+ ```
51
+ ****その結果↓****
52
+ ![結果画面](088340efd8eb6cb2f40c31d6789abe1c.png)
53
+
54
+
28
55
  <!-- ****　子のHTML　*** -->
29
56
  ```html
30
57
  <body>
@@ -48,7 +75,7 @@
48
75
  ```
49
76
 
50
77
 
51
-
78
+ **** iframe を使わずに、親子一つのファイルで（分割する前）正常に動作していたscript****
52
79
  ```javascript
53
80
  var buttons = document.querySelectorAll('button');
54
81
 

1

codeを囲みました

2020/10/14 14:35

投稿

mikan-ponkan
mikan-ponkan

スコア0

title CHANGED
File without changes
body CHANGED
@@ -10,6 +10,7 @@
10
10
 
11
11
  ### ソースコード
12
12
  <!-- ****　親のHTML　*** -->
13
+ ```html
13
14
  <body>
14
15
  <button type="button" onclick="function()">iframe内のすべてのメニュ-を開く</button>
15
16
  <button type="button" onclick="function()">iframe内のすべてのメニュ-を閉じる</button>
@@ -21,8 +22,11 @@
21
22
  </script>
22
23
 
23
24
  </body>
25
+ ```
24
26
 
27
+
25
28
  <!-- ****　子のHTML　*** -->
29
+ ```html
26
30
  <body>
27
31
  <details>
28
32
  <summary>メニュー1</summary>
@@ -41,10 +45,11 @@
41
45
  </details>
42
46
 
43
47
  </body>
48
+ ```
44
49
 
45
50
 
46
- <!-- ****　javascript　*** -->
51
+
47
- <script>
52
+ ```javascript
48
53
  var buttons = document.querySelectorAll('button');
49
54
 
50
55
  buttons[0].addEventListener('click', function(event) {
@@ -64,5 +69,4 @@
64
69
  var target = details[i];
65
70
  if (target.hasAttribute('open')) {target.removeAttribute('open');}
66
71
  else {target.setAttribute('open', 'open');}
67
-
68
- </script>
72
+ ```