質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

503閲覧

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

mikan-ponkan

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/10/13 15:59

編集2022/01/12 10:55

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

実現したいこと

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

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

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

困っていること

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

イメージ

一つのファイルだと正常に動作する
一つのファイル
iframeを使うと、ボタンをクリックしても開閉しない
iframeを使った場合

ソースコード(一つのファイルだと正常に動作する。<その1>)

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>

ソースコード(一つのファイルだと正常に動作する。<その2>)

※教えて頂いた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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuma_kuma_

2020/10/13 16:06

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

2020/10/13 16:20

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

2020/10/13 16:55

ご自身で調べてみたのでしょうか??
m.ts10806

2020/10/13 20:02

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

回答2

0

javascript

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

投稿2020/10/14 01:04

編集2020/10/15 00:22
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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
guest

0

iframe の中の document を取得したいということであれば、以下の記事が参考になりませんか?

<iframe>: The Inline Frame element - Scripting [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting)

そういうことではない?

投稿2020/10/13 23:12

編集2020/10/14 01:06
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikan-ponkan

2020/10/14 14:14

ご回答ありがとうございます。 夜の空いた時間にやっているので、ご返事が遅れて申し訳ありません。 今回は、iframeの中から外への操作でなく、外からiframe内への操作で、行き詰まりました。(;_:)
退会済みユーザー

退会済みユーザー

2020/10/14 14:26

> iframeの中から外への操作でなく、外からiframe内への操作 それは分かっているので、それができる情報を提供したつもりなんですけど。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問