HTML内のiFrameの中のCSSで折りたたまれた文章をJavaScriptで展開させたい

javascriptを使用して、htmlファイル間をまたいでcssを展開をしたいと考えています。

同ファイルであれば展開することができます。

Aのhtmlファイルで作ったボタンでAのcssの展開をjavascriptから開くことはできるのですが、
Aのhtmlファイルで作ったボタンからBのファイルを展開しようとするとnull is an not objectのエラーが出てしまうのです。

portal.html

html
1<html lang="ja">
2<meta charset="utf-8">
3<head>
4  <title>ポータル</title>
5    <body>
6    <TABLE width="100%" border="1">
7      <TBODY>
8        <TR>
9          <td align= "TOP" width= "20%" height="100%">
10            <H4>業務準備</H4>
11            <DIV class="side" align="left">
12              <各種システム><br>
13              <掲示板><br>
14              <関連><br>
15              <ルール><br>
16              <input type="button" value="展開１" onclick="clickBtn1()"/>
17            　<input type="button" value="展開２" onclick="clickBtn2()"/>
18              <br>
19              <b>
20                <div onclick="obj1=document.getElementById('5/13 我が家の怪談').style;
21                              obj1.display=(obj1.display=='none')?'block':'none';">
22                  <a style="cursor:pointer;">5/13 我が家の怪談</a>
23                </div>
24                <div id="5/13 我が家の怪談" style="display:none; clear:both;">
25                  <h4>昨晩のことだった！<br><hr></h4>
26                </div>
27              </b>
28          <td colspan= "2" width="50%" height="400">
29            <DIV class="side" align="center">
30              <font size="6">周知事項</font><br>
31              内容は<font color="red">タイトルをクリック</font>展開して下さい／検索はCtrl+F(タイトルのみ検索)<br>
32              <iframe Src="news.html" Width="95%" Height="350" name="mintag"></iframe><br>
33            </DIV>
34          </td>
35        </TR>
36      </TBODY>
37    </TABLE>
38    <script src="js/index.js" charset="utf-8"></script>
39  </body>
40</head>
41</html>
42

news.html

html
1<html lang="ja">
2<meta charset="utf-8">
3<head>
4  <body>
5  <title>ポータル</title>
6
7  <style type="text/css">
8  <!--
9  A:hover{
10    text-decoration: underline;
11    background-color: lightcyan;
12  }
13  </style>
14
15  <b>
16    <div onclick="obj=document.getElementById('5/8【注意】動物シールについて').style;
17                  obj.display=(obj.display=='none')?'block':'none';">
18      <a style="cursor:pointer;">5/8【注意】動物シールについて</a>
19    </div>
20    <div id="5/8【注意】動物シールについて" style="display:none; clear:both;">
21      これまでのクッキーについていた動物シールは、<br>
22      キリンさんがついていました。<br><br>
23    </div>
24  </b>
25
26  <b>
27    <div onclick="obj=document.getElementById('5/3【周知】語句登録の追加').style;
28                  obj.display=(obj.display=='none')?'block':'none';">
29      <a style="cursor:pointer;">5/3【周知】語句登録の追加</a>
30    </div>
31    <div id="5/3【周知】語句登録の追加" style="display:none; clear:both;">
32      ＠v→【ヴィクトリア】<br>
33      ＠り→【リンゴスター】or【リサ・ローブ】or【リンカーン】<br><br>
34    </div>
35  </b>
36  <script src="js/index.js" charset="utf-8"></script>
37  </body>
38</head>
39</html>

index.js

javascript
1function clickBtn1(){
2  console.log("テスト1btn1")
3  const obj = document.getElementById("5/13 我が家の怪談");
4  console.log(obj);
5
6  if(obj.style.display=="none"){
7    console.log("obj.style.display");
8    obj.style.display="block";
9  } else {
10    console.log("テスト2btn1");
11    obj.style.display ="none";
12  }
13}
14
15function clickBtn2(){
16  console.log("テスト1btn2")
17  const obj2 = document.getElementById("5/8【注意】動物シールについて");
18  console.log(obj2);
19
20  if(obj2.style.display=="none"){
21    console.log("obj2.style.display");
22    obj2.style.display="block";
23  } else {
24    console.log("テスト2btn2");
25    obj2.style.display ="none";
26  }
27}

portal.htmlの展開2のボタンでnews.html内の動物シールを開きたいのですが、TypeError: null is not an objectだと怒られてしまいます。

展開1のボタンですぐ下の我が家の怪談は開くのですが、動物シールはnullだと言われているので参照の引き渡しがうまくできていないためだとは思うのですが自分の今の実力では解決することができないため、
お力添えをいただければと思います。よろしくお願いいたします。

mari.rinn

2021/05/17 01:32

私の解釈が違ってたらすみませんが、要するにやりたいことは、動物シールについて　のところを、共有したい　ということで良いのでしょうか？その場合、その呼び出したい部分だけを記述したhtmlファイルを作ってjQueryで呼び出すと簡単に呼び出せますが、そういうやり方でも構いませんか？

sssaqj

2021/05/18 22:41

返事が遅くなってしまいすみません。使用環境でjqueryを使えるかの確認に時間がかかるのですが教えていただければとても助かります。

sssaqj

2021/05/21 02:09

タイトルを修正しました。自分の理解不足で問題点の特定が正確にできていませんでした。誤解を招いて申し訳ないです。

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

回答2件

ベストアンサー

iframe内のhtmlはその親のhtmlの要素と同じようには使用できません。
いったんiframeの要素を持ってきて.contentWindow.documentから中身を持ってくることが出来ます。

javascript
1const iframe = document.getElementById("iframeのId");
2const iframe_youso = iframe.contentWindow.document.getElementById("5/8【注意】動物シールについて");

投稿2021/05/27 06:52

makosankibu

総合スコア289

sssaqj

2021/06/06 17:30 編集

お返事が大変遅くなってしまい申し訳ありません。完全に自分のスキル不足の質問でした。 MDNのjavascriptでDOMとfunctionについての基礎知識を養うことから必要でありました。さらにCORSも何のことかわかっていずググりまくり、GitHubで簡単なホームページをアップロードの仕方を学んでようやく教えていただいた通りで動かすことができました。ご教示いただき大変ありがとうございました。

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

まず、共有したい部分のみのhtmlファイルを作ります。これは<head>や<body>などの記述は書かずに、読み込む部分のみを記述します。

html
1<div id="5/8【注意】動物シールについて" style="display:none; clear:both;"> これまでのクッキーについていた動物シールは、<br> キリンさんがついていました。<br><br> </div>

これだけで良いです。これを仮に
include.html　という名前にしときます。（このように外部ファイルを読み込む事をインクルードするといいます）

で、読み込んだ物を表示するファイル上
でjQueryを使用する場合は、<head>内に

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

と入れときます(jQueryのバージョンは必ずしもこれでなくても良いですが、これでいけます)。

そして、どの場所に表示したいか決めて、まあ仮に

<div id="here"></div>

としますね。

そしたらscriptの記述を

jQuery
1<script> 
2$(function(){ $("#here").load("include.html"); })
3 </script>

とすればid="here"の部分に読み込めます。

で、ググったらjQueryのこのやり方のjavascriptへの書き換え方を教えてくれてるところがありましたので、一応リンク貼っておきますね。

【脱jQuery】.load()で別ページから共通パーツを読み込むのをネイティブに書き換え

あ、これはこのままではページがロードされた時に表示されてしまいますので、id="here"の部分は、最初は隠しておいて、ボタンクリックで表示するようにscriptを書いてくださいね。

投稿2021/05/19 02:03

編集2021/05/19 02:11

mari.rinn

総合スコア296

sssaqj

2021/06/06 17:33

私の理解不足で言葉足らずの質問でご迷惑をおかけいたしました。しかし、何も回答つかぬところで答えていただけたおかげで自分の不足を知ることができました。ご助力ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問