JavaScriptで共通部分のheader, side, footerを作成してindex.htmlでは適用できたのですが、他のファイル下にあるhtml(下のディレクトリ図で言うpc.html)に適用しようとするとheader, side, footerのいずれも表示されないです。
(参考URL→https://qiita.com/hiroyukiwk/items/f2a74ba1406de9fad6f6)
簡単にディレクトリを書いてみました↓
web
├index.html
├js
│ └include.js
├diary
│ └pc.html
└include
. ├header.html
. ├side.html
. └footer.html
下のheader, side, footerを指定するのが"<script>header('../');</script>"なんですがどのように変更すればよいかわかりません。
index.html
html
1<!DOCTYPE html> 2<html dir="ltr" lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0"> 6<title>*******</title> 7<link rel="icon" type="image/png" href="./images/favicon.png"> 8<meta name="keywords" content=""> 9<meta name="description" content=""> 10<link rel="stylesheet" href="style.css" type="text/css" media="screen"> 11<!--[if lt IE 9]> 12<script src="js/html5.js"></script> 13<script src="js/css3-mediaqueries.js"></script> 14<![endif]--> 15<script src="js/jquery1.7.2.min.js"></script> 16<script src="js/script.js"></script> 17<script src="js/include.js"></script> 18</head> 19<body> 20 21<script>header('../');</script> 22 23<div id="wrapper"> 24 25 //本文 26 27 <script>side('../');</script> 28 29</div> 30 31<script>footer('../');</script> 32 33</body> 34</html>
###pc.html
html
1<!DOCTYPE html> 2<html dir="ltr" lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0"> 6<title>*******</title> 7<link rel="icon" type="image/png" href="./images/favicon.png"> 8<meta name="keywords" content=""> 9<meta name="description" content=""> 10<link rel="stylesheet" href="style.css" type="text/css" media="screen"> 11<!--[if lt IE 9]> 12<script src="js/html5.js"></script> 13<script src="js/css3-mediaqueries.js"></script> 14<![endif]--> 15<script src="C:/Apache24/home/web/js/jquery1.7.2.min.js"></script> 16<script src="C:/Apache24/home/web/js/script.js"></script> 17<script src="C:/Apache24/home/web/js/include.js"></script> 18</head> 19<body> 20 21<script>header('../');</script> 22 23<div id="wrapper"> 24 25 //本文 26 27 <script>side('../');</script> 28 29</div> 30 31<script>footer('../');</script> 32 33</body> 34</html>
###include.js
js
1function header(rootDir){ 2 $.ajax({ 3 url: rootDir + "include/header.html", 4 cache: false, 5 async: false, 6 dataType: 'html', 7 success: function(html){ 8 html = html.replace(/\{$root\}/g, rootDir); 9 document.write(html); 10 } 11 }); 12} 13 14function side(rootDir){ 15 $.ajax({ 16 url: rootDir + "include/side.html", 17 cache: false, 18 async: false, 19 dataType: 'html', 20 success: function(html){ 21 html = html.replace(/\{$root\}/g, rootDir); 22 document.write(html); 23 } 24 }); 25} 26 27function footer(rootDir){ 28 $.ajax({ 29 url: rootDir + "include/footer.html", 30 cache: false, 31 async: false, 32 dataType: 'html', 33 success: function(html){ 34 html = html.replace(/\{$root\}/g, rootDir); 35 document.write(html); 36 } 37 }); 38}
補足情報
Apache/2.4.37 (Win64)
回答1件
あなたの回答
tips
プレビュー