Q&A
私の解釈が違ってたらすみませんが、要するにやりたいことは、動物シールについて のところを、共有したい ということで良いのでしょうか？
その場合、その呼び出したい部分だけを記述したhtmlファイルを作ってjQueryで呼び出すと簡単に呼び出せますが、そういうやり方でも構いませんか？
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だと言われているので参照の引き渡しがうまくできていないためだとは思うのですが自分の今の実力では解決することができないため、
お力添えをいただければと思います。よろしくお願いいたします。
回答2件
0
ベストアンサー
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
総合スコア289
お返事が大変遅くなってしまい申し訳ありません。
完全に自分のスキル不足の質問でした。
MDNのjavascriptでDOMとfunctionについての基礎知識を養うことから必要でありました。
さらにCORSも何のことかわかっていずググりまくり、GitHubで簡単なホームページ をアップロードの仕方を学んでようやく教えていただいた通りで動かすことができました。
ご教示いただき大変ありがとうございました。
0
まず、共有したい部分のみの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総合スコア296
私の理解不足で言葉足らずの質問でご迷惑をおかけいたしました。
しかし、何も回答つかぬところで答えていただけたおかげで自分の不足を知ることができました。ご助力ありがとうございました。
あなたの回答
tips
プレビュー
