Bootstrap4でHTMLパーツの共有化＜ヘッダー、サイド、フッター＞

静的HTMLよく使われるjQueryでのHTMLパーツの共通化。インラインフレームよりも便利なのでよく利用します。

インラインフレームはボーダーやスクロール、高さなどいろいろ面倒なので好きではありません。

今回はBootstrapでこのパーツの共有化が必要になり、いろいろ試したんですがBootstrap4で上手く動かない、あれこれ試してみました。

<script>
 $(function() {
 $("#header").load("header.html #header-content");
 $("#side").load("side.html #side-content");
 $("#footer").load("footer.html #footer-content");
 });
</script>

$(function() {

$("#header").load("header.html #header-content");

$("#side").load("side.html #side-content");

$("#footer").load("footer.html #footer-content");

});

</script>

原因はjQueryの読み込み場所とバージョン

Bootstrap4のCDNでは</body>の直前に「最初にjQuery、次にPopper.js、次にBootstrap JS」と読み込みます。

<!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

このjQueryを</body>の直前ではなく</head>の前に持って行きます。そしてjQueryのバージョンはBootstrap3のCDNに置き換えます。

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

1 2	<!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Bootstrap4のjQueryバージョンは「v4.1.0時点でjQuery1.9.1以上に対応」ですので「1.11.3」でも大丈夫。

</head>の前に

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
 $(function() {
 $("#header").load("header.html");
 $("#side").load("side.html");
 $("#footer").load("footer.html");
 });
</script>

$(function() {

$("#header").load("header.html");

$("#side").load("side.html");

$("#footer").load("footer.html");

});

</script>

これでBootstrap4でも問題無くHTMLパーツの共有化ができました。

HTMLサンプル

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<title>Bootstrap4/共通パーツの読み込み【トップページ】</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(function() {
 $("#header-outer").load("header.html #header-inner");
 $("#side-outer").load("side.html #side-inner");
 $("#footer-outer").load("footer.html #footer-inner");
 });
</script>
</head>
<body>

<!-- header-innerの読み込み -->
<div id="header-outer"></div>
<!-- /header-innerの読み込み -->

<!-- Page Content -->
<div class="container my-5">
<!-- .row -->
<div class="row">

<!-- col-md-9--->
<div class="col-md-9">
<img src="https://placehold.it/900x450" class="img-fluid mb-4" alt=""/>
<img src="https://placehold.it/900x450" class="img-fluid mb-4" alt=""/>
<img src="https://placehold.it/900x450" class="img-fluid" alt=""/>
</div>
<!-- /col-md-9--->

<div class="col-md-3">
<!-- side-nnerの読み込み -->
<div id="side-outer"></div>
<!-- side-nnerの読み込み -->
</div>

</div>
<!-- /.row -->
</div>
<!-- /Page Content -->

<!-- footer-innerの読み込み -->
<div id="footer-outer"></div>
<!-- /footer-innerの読み込み -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

<!doctype html>

<head>

<title>Bootstrap4/共通パーツの読み込み【トップページ】</title>

$(function() {

$("#header-outer").load("header.html #header-inner");

$("#side-outer").load("side.html #side-inner");

$("#footer-outer").load("footer.html #footer-inner");

});

</script>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

header.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<title>Bootstrap4/共通パーツの読み込み【ヘッダー】</title>
</head>
<body>

<!-- header-inner --> 
<div id="header-inner">
<img src="https://placehold.it/1500x200" class="img-fluid" alt=""/>
</div>
<!-- /header-inner --> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

<!doctype html>

<head>

<title>Bootstrap4/共通パーツの読み込み【ヘッダー】</title>

</head>

<body>

</div>

</body>

</html>

side.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<title>Bootstrap4/共通パーツの読み込み【サイド】</title>
</head>
<body>

<!-- Page Content -->
<div class="container">
<!-- .col-md-3 -->
<div class="col-md-3">

<!-- side-inner --> 
<div id="side-inner">
<img src="https://placehold.it/400x400" class="img-fluid mb-4" alt=""/>
<img src="https://placehold.it/400x200" class="img-fluid mb-4" alt=""/>
<img src="https://placehold.it/400x200" class="img-fluid mb-4" alt=""/>
<img src="https://placehold.it/400x200" class="img-fluid mb-4" alt=""/>
<img src="https://placehold.it/400x200" class="img-fluid" alt=""/>
</div>
<!-- /side-inner --> 

</div>
<!-- /.col-md-3 -->
</div>
<!-- /Page Content -->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

<!doctype html>

<head>

<title>Bootstrap4/共通パーツの読み込み【サイド】</title>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

footer.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<title>Bootstrap4/共通パーツの読み込み【フッター】</title>
</head>
<body>

<!-- footer-inner --> 
<div id="footer-inner">
<img src="https://placehold.it/1500x200" class="img-fluid" alt=""/>
</div>
<!-- /footer-inner --> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

<!doctype html>

<head>

<title>Bootstrap4/共通パーツの読み込み【フッター】</title>

</head>

<body>

</div>

</body>

</html>

※header.htmlのみjQueryバージョン、読み込み位置を変えています。

※読み込みを $("#header-outer").load("header.html");としてページ全体を読み込む設定でもいいんですがBootstrapの場合 $("#header-outer").load("header.html #header-inner");としたほうが共通パーツのイメージが編集しやすい、特にサイドは。

HTMLサンプル

ローカルでの確認はChromeやIEでは上手くいきません、Firefoxならそのままで可能です。