Q&A
コンソールにエラーなどメッセージは出ていませんか？
htmlファイルの共通部分を外部ファイル化し jQueryで読み込ませたい
webサイトを作っています。
htmlファイルの共通部分が多くなったため、外部ファイル化し一括で変更できるようにしたいと考えています。
header footerや、idをつけた要素をまるっと外部ファイルにまとめ、それらを統合するためにjQueryを使おうと考えています。
現在のコード
contents.htmlは以下のように書きました。
html
1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CA Contents</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="../css/MainTest.css"> 9 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 10 <link rel="stylesheet" href="../css/ResponsiveTest.css"> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 12 13 <script> 14 $(function(){ 15 $("#headerContainer").load("/sharetest/headerContainer.html"); 16 }); 17 </script> 18 </head> 19 20 21 <body> 22 <div id="BodyContents"> 23 24 <!--header--> 25 <header> 26 <div id="headerContainer"> 27 28 </div> 29 </header> 30 </div> 31 32 <script src="../jQuery/scriptTestMQ.js"></script> 33 </body> 34</html> 35
head要素の最後に、sharetestフォルダ内に移動させたheaderContainer.htmlを読み込ませる命令を書いています。
最後の</body>の直前で読み込んでいるのは、webページを動かすことだけに特化したjQueryのファイルです。
headerContainer.html
html
1<div id="header-left"> 2 <a href="FirstTestMQ.html"> <img src="../picture/CAlogo3.png" alt=""> </a> 3</div> 4 5<div id="header-right"> 6 <div class="menu"> 7 <a href="About.html">About</a> 8 </div> 9 <div class="menu"> 10 <a href="ContentsTest.html">Contents</a> 11 </div> 12 <div class="menu"> 13 <a href="contactTest.html">Contact</a> 14 </div> 15</div>
予定では、headerContainer.htmlが、contents.htmlの
html
1<header> 2 <div id="headerContainer"> 3 4 </div> 5</header>
部分に読み込まれるはずなのですが、上手くいきません。
ディレクトリ構造
webpage
|
html css jQuery picture
|
sharetest contents.html
|
headerContainer.html
どうぞよろしくお願い申し上げます。
上手くいかないというのは読み込まれないということですか？
それとも scriptTestMQ.js が動かないということですか？
いっそPHPなどサーバーサイドの言語からテンプレートエンジン使っては…
意外とハイパーリロードやってみるといいかもしれません
ディレクトリ構成は tree コマンドの結果をエディタなどで編集し、コードブロックで示したほうが伝わりやすいと思います。
回答1件
0
ベストアンサー
ディレクトリが違うのではないでしょうか
"/sharetest/headerContainer.html" → "sharetest/headerContainer.html"
投稿2020/04/15 07:08
総合スコア99
あなたの回答
tips
プレビュー
