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

編集履歴

質問編集履歴

5

修正しました

2020/10/17 18:20

投稿

mikan-ponkan
mikan-ponkan

スコア0

test CHANGED
File without changes
test CHANGED
@@ -160,7 +160,7 @@
160
160
 
161
161
 
162
162
 
163
- <details class="t1">
163
+ <details>
164
164
 
165
165
  <summary>メニュー1</summary>
166
166
 

4

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

2020/10/17 18:20

投稿

mikan-ponkan
mikan-ponkan

スコア0

test CHANGED
File without changes
test CHANGED
@@ -1,16 +1,16 @@
1
+ 質問の内容を少し修正しました。
2
+
3
+
4
+
1
5
  ### 実現したいこと
2
6
 
3
- 過去の質問（※この質問者の方とは別人です。）の応用で、iframeを使った場合について質問します。
4
-
5
- 　https://teratail.com/questions/209796
6
-
7
7
 
8
8
 
9
9
  親ファイルのボタンをクリックすると、iframeのファイル内の<details>が開閉するようにしたいです。
10
10
 
11
11
 
12
12
 
13
- ローカル環境で、jQueryを使わずにできればよいのですが。
13
+ （ローカル環境で、jQueryを使わずに実現したい。）
14
14
 
15
15
 
16
16
 
@@ -18,37 +18,245 @@
18
18
 
19
19
 
20
20
 
21
+ ### 困っていること
22
+
23
+
24
+
25
+ 下記ソースのように、一つのファイルだと正常に動作するのですが、
26
+
27
+ ファイルを分割する（iframe）と、ボタンをクリックしても<details>が開閉しません。
28
+
29
+
30
+
21
- ### ソースコード
31
+ ### イメージ
32
+
22
-
33
+ 一つのファイルだと正常に動作する
34
+
35
+ ![一つのファイル](a52971835104a7382824f21975c118cc.png)
36
+
23
- <!-- ****　親のHTML　*** -->
37
+ iframeを使うと、ボタンをクリックしても開閉しない
38
+
39
+ ![iframeを使った場合](6c8f13267aee83af23d3099b91a28f16.png)
40
+
41
+
42
+
43
+ ### ソースコード（一つのファイルだと正常に動作する。＜その１＞）
24
44
 
25
45
  ```html
26
46
 
47
+ <html>
48
+
27
49
  <body>
28
50
 
51
+
52
+
53
+ <button type="button">全てのメニューを開く</button>
54
+
55
+ <button type="button">全てのメニューを閉じる</button>
56
+
57
+
58
+
59
+ <details>
60
+
61
+ <summary>メニュー1</summary>
62
+
63
+ <ul>
64
+
65
+ <li>りんご</li>
66
+
67
+ <li>みかん</li>
68
+
69
+ </ul>
70
+
71
+ </details>
72
+
73
+
74
+
75
+ <details>
76
+
77
+ <summary>メニュー2</summary>
78
+
79
+ <ul>
80
+
81
+ <li>いか1</li>
82
+
83
+ <li>たこ</li>
84
+
85
+ </ul>
86
+
87
+ </details>
88
+
89
+
90
+
91
+ <script type="text/javascript">
92
+
93
+
94
+
95
+ var buttons = document.querySelectorAll('button');
96
+
97
+
98
+
99
+ buttons[0].addEventListener('click', function(event) {
100
+
101
+ var details = document.querySelectorAll('details');
102
+
103
+ for (var i = 0; i < details.length; i++) {
104
+
105
+ details[i].setAttribute('open', 'open');
106
+
107
+ }
108
+
109
+ }, false);
110
+
111
+
112
+
113
+ buttons[1].addEventListener('click', function(event) {
114
+
115
+ var details = document.querySelectorAll('details');
116
+
117
+ for (var i = 0; i < details.length; i++) {
118
+
119
+ details[i].removeAttribute('open');
120
+
121
+ }
122
+
123
+ }, false);
124
+
125
+
126
+
127
+
128
+
129
+ var target = details[i];
130
+
131
+ if (target.hasAttribute('open')) {target.removeAttribute('open');}
132
+
133
+ else {target.setAttribute('open', 'open');}
134
+
135
+
136
+
137
+ </script>
138
+
139
+
140
+
141
+ </body></html>
142
+
143
+ ```
144
+
145
+ ### ソースコード（一つのファイルだと正常に動作する。＜その２＞）
146
+
147
+ ※教えて頂いたscript使ってます（感謝）
148
+
149
+ ```html
150
+
151
+ <html>
152
+
153
+ <body>
154
+
155
+
156
+
157
+ <button type="button" onclick="details_open(true)">全てのメニューを開く</button>
158
+
159
+ <button type="button" onclick="details_open(false)">全てのメニューを閉じる</button>
160
+
161
+
162
+
163
+ <details class="t1">
164
+
165
+ <summary>メニュー1</summary>
166
+
167
+ <ul>
168
+
169
+ <li>りんご</li>
170
+
171
+ <li>みかん</li>
172
+
173
+ </ul>
174
+
175
+ </details>
176
+
177
+
178
+
179
+ <details>
180
+
181
+ <summary>メニュー2</summary>
182
+
183
+ <ul>
184
+
185
+ <li>いか1</li>
186
+
187
+ <li>たこ</li>
188
+
189
+ </ul>
190
+
191
+ </details>
192
+
193
+
194
+
195
+ <script type="text/javascript">
196
+
197
+
198
+
199
+ const details_open = (flg) =>{ const dtls = document.querySelectorAll('details');
200
+
201
+ dtls.forEach(x=>x.open=flg);
202
+
203
+ }
204
+
205
+
206
+
207
+ </script>
208
+
209
+ </body></html>
210
+
211
+ ```
212
+
213
+
214
+
215
+ ### iframeを使うと、ボタンをクリックしても開閉しない。
216
+
217
+ 親のHTML
218
+
219
+ ```html
220
+
221
+ <!DOCTYPE html>
222
+
223
+ <html>
224
+
225
+ <head>
226
+
227
+ </head>
228
+
229
+ <body>
230
+
29
- <button type="button" onclick="function()">iframe内のすべてのメニュ-を開く</button>
231
+ <button type="button" onclick="details_open(true)">iframe内の全てのメニュ-を開く</button>
30
-
232
+
31
- <button type="button" onclick="function()">iframe内のすべてのメニュ-を閉じる</button>
233
+ <button type="button" onclick="details_open(false)">iframe内の全てのメニュ-を閉じる</button>
32
234
 
33
235
  <br>
34
236
 
35
- <iframe src="sub_fm.html" id="id_ifrem"></iframe>
237
+ <iframe src="sub_fm.html" id="id_ifrem" title="sub-ifrm"></iframe>
36
-
37
-
38
-
39
- <script>
238
+
40
-
239
+
240
+
41
- // ここに入れるscriptがわかりません。
241
+ <script type="text/javascript">
242
+
243
+ const details_open = (flg) =>{ const dtls = document.querySelector('#id_ifrem').contentWindow.document.querySelectorAll('details');
244
+
245
+ dtls.forEach(x=>x.open=flg);
246
+
247
+ }
42
248
 
43
249
  </script>
44
250
 
45
-
46
-
47
251
  </body>
48
252
 
253
+ <html>
254
+
49
255
  ```
50
256
 
257
+
258
+
51
- ****修正したコード（親のhtml）途中経過で未解決　****　↓
259
+ 子（iframeの中）のHTML
52
260
 
53
261
  ```html
54
262
 
@@ -56,154 +264,48 @@
56
264
 
57
265
  <html>
58
266
 
267
+ <head>
268
+
269
+ <title>sub-ifrm</title>
270
+
271
+ </head>
272
+
273
+
274
+
59
275
  <body>
60
276
 
277
+ <details>
278
+
61
- <button type="button" onclick="details_open(true)">iframe内のすべてのメニュ-を開く</button>
279
+ <summary>メニュー1</summary>
62
-
63
- <button type="button" onclick="details_open(false)">iframe内のすべてのメニュ-を閉じる</button>
280
+
64
-
65
- <br>
281
+ <ul>
66
-
67
- <iframe src="sub_fm.html" id="id_ifrem" title="sub-ifrm"></iframe>
282
+
68
-
69
-
70
-
71
- <script type="text/javascript">
283
+ <li>みかん</li>
72
-
73
- document.write("テスト：始→　");
284
+
74
-
75
-
76
-
77
- const details_open = (flg) =>{
78
-
79
- const dtls = document.querySelector('#id_ifrem').contentWindow.document.querySelectorAll('details');
80
-
81
- dtls.forEach(x=>x.open=flg);
285
+ <li>いちご</li>
82
-
83
- }
286
+
84
-
85
-
86
-
87
- console.log(flg);
287
+ </ul>
88
-
89
- document.write("テスト：終");
288
+
90
-
91
- </script>
289
+ </details>
290
+
291
+
292
+
92
-
293
+ <details>
294
+
93
-
295
+ <summary>メニュー2</summary>
296
+
297
+ <ul>
298
+
299
+ <li>いか</li>
300
+
301
+ <li>たこ</li>
302
+
303
+ </ul>
304
+
305
+ </details>
94
306
 
95
307
  </body>
96
308
 
97
- <html>
309
+ </html>
98
310
 
99
311
  ```
100
-
101
- ****その結果↓****
102
-
103
- ![結果画面](088340efd8eb6cb2f40c31d6789abe1c.png)
104
-
105
-
106
-
107
-
108
-
109
- <!-- ****　子のHTML　*** -->
110
-
111
- ```html
112
-
113
- <!DOCTYPE html>
114
-
115
- <html>
116
-
117
- <head>
118
-
119
- <title>sub-ifrm</title>
120
-
121
- </head>
122
-
123
-
124
-
125
- <body>
126
-
127
- <details>
128
-
129
- <summary>メニュー1</summary>
130
-
131
- <ul>
132
-
133
- <li>みかん</li>
134
-
135
- <li>いちご</li>
136
-
137
- </ul>
138
-
139
- </details>
140
-
141
-
142
-
143
- <details>
144
-
145
- <summary>メニュー2</summary>
146
-
147
- <ul>
148
-
149
- <li>いか</li>
150
-
151
- <li>たこ</li>
152
-
153
- </ul>
154
-
155
- </details>
156
-
157
- </body>
158
-
159
- </html>
160
-
161
- ```
162
-
163
-
164
-
165
-
166
-
167
- **** iframe を使わずに、親子一つのファイルで（分割する前）正常に動作していたscript****
168
-
169
- ```javascript
170
-
171
- var buttons = document.querySelectorAll('button');
172
-
173
-
174
-
175
- buttons[0].addEventListener('click', function(event) {
176
-
177
- var details = document.querySelectorAll('details');
178
-
179
- for (var i = 0; i < details.length; i++) {
180
-
181
- details[i].setAttribute('open', 'open');
182
-
183
- }
184
-
185
- }, false);
186
-
187
-
188
-
189
- buttons[1].addEventListener('click', function(event) {
190
-
191
- var details = document.querySelectorAll('details');
192
-
193
- for (var i = 0; i < details.length; i++) {
194
-
195
- details[i].removeAttribute('open');
196
-
197
- }
198
-
199
- }, false);
200
-
201
-
202
-
203
- var target = details[i];
204
-
205
- if (target.hasAttribute('open')) {target.removeAttribute('open');}
206
-
207
- else {target.setAttribute('open', 'open');}
208
-
209
- ```

3

コード修正

2020/10/17 18:12

投稿

mikan-ponkan
mikan-ponkan

スコア0

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  <br>
66
66
 
67
- <iframe src="sub_fm.html" id="id_ifrem"></iframe>
67
+ <iframe src="sub_fm.html" id="id_ifrem" title="sub-ifrm"></iframe>
68
68
 
69
69
 
70
70
 
@@ -110,6 +110,18 @@
110
110
 
111
111
  ```html
112
112
 
113
+ <!DOCTYPE html>
114
+
115
+ <html>
116
+
117
+ <head>
118
+
119
+ <title>sub-ifrm</title>
120
+
121
+ </head>
122
+
123
+
124
+
113
125
  <body>
114
126
 
115
127
  <details>
@@ -142,10 +154,10 @@
142
154
 
143
155
  </details>
144
156
 
145
-
146
-
147
157
  </body>
148
158
 
159
+ </html>
160
+
149
161
  ```
150
162
 
151
163
 

2

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

2020/10/14 14:59

投稿

mikan-ponkan
mikan-ponkan

スコア0

test CHANGED
File without changes
test CHANGED
@@ -47,6 +47,60 @@
47
47
  </body>
48
48
 
49
49
  ```
50
+
51
+ ****修正したコード（親のhtml）途中経過で未解決　****　↓
52
+
53
+ ```html
54
+
55
+ <!DOCTYPE html>
56
+
57
+ <html>
58
+
59
+ <body>
60
+
61
+ <button type="button" onclick="details_open(true)">iframe内のすべてのメニュ-を開く</button>
62
+
63
+ <button type="button" onclick="details_open(false)">iframe内のすべてのメニュ-を閉じる</button>
64
+
65
+ <br>
66
+
67
+ <iframe src="sub_fm.html" id="id_ifrem"></iframe>
68
+
69
+
70
+
71
+ <script type="text/javascript">
72
+
73
+ document.write("テスト：始→　");
74
+
75
+
76
+
77
+ const details_open = (flg) =>{
78
+
79
+ const dtls = document.querySelector('#id_ifrem').contentWindow.document.querySelectorAll('details');
80
+
81
+ dtls.forEach(x=>x.open=flg);
82
+
83
+ }
84
+
85
+
86
+
87
+ console.log(flg);
88
+
89
+ document.write("テスト：終");
90
+
91
+ </script>
92
+
93
+
94
+
95
+ </body>
96
+
97
+ <html>
98
+
99
+ ```
100
+
101
+ ****その結果↓****
102
+
103
+ ![結果画面](088340efd8eb6cb2f40c31d6789abe1c.png)
50
104
 
51
105
 
52
106
 
@@ -98,7 +152,7 @@
98
152
 
99
153
 
100
154
 
101
-
155
+ **** iframe を使わずに、親子一つのファイルで（分割する前）正常に動作していたscript****
102
156
 
103
157
  ```javascript
104
158
 

1

codeを囲みました

2020/10/14 14:35

投稿

mikan-ponkan
mikan-ponkan

スコア0

test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,8 @@
22
22
 
23
23
  <!-- ****　親のHTML　*** -->
24
24
 
25
+ ```html
26
+
25
27
  <body>
26
28
 
27
29
  <button type="button" onclick="function()">iframe内のすべてのメニュ-を開く</button>
@@ -44,9 +46,15 @@
44
46
 
45
47
  </body>
46
48
 
49
+ ```
50
+
51
+
52
+
47
53
 
48
54
 
49
55
  <!-- ****　子のHTML　*** -->
56
+
57
+ ```html
50
58
 
51
59
  <body>
52
60
 
@@ -84,13 +92,15 @@
84
92
 
85
93
  </body>
86
94
 
95
+ ```
87
96
 
88
97
 
89
98
 
90
99
 
91
- <!-- ****　javascript　*** -->
92
100
 
101
+
102
+
93
- <script>
103
+ ```javascript
94
104
 
95
105
  var buttons = document.querySelectorAll('button');
96
106
 
@@ -130,6 +140,4 @@
130
140
 
131
141
  else {target.setAttribute('open', 'open');}
132
142
 
133
-
134
-
135
- </script>
143
+ ```