<質問本題>
ヘッダー・フッター・フローティングメニュー・サイドバーを別htmlファイルにして、変更があった場合の手間を省きたい

<条件要望等>

サーバーに左右されない（PHPやSSIの使用可否など）
Gulpのようにコマンドプロンプトを使わない
iframeは使用しない方が良さそう？なので今回は除外でお願いします
出来るだけ導入が簡単なものでお願いします

<扱えるもの>

html
css
jQuery
Javascript

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

回答4件

Javascript 共通パーツ
辺りで検索して出てくる上位のページはどれも参考になる（ほぼそのまま使える）かと思います。

投稿2017/10/26 07:36

tanat

総合スコア18713

退会済みユーザー

2017/10/26 08:51

回答ありがとうございます！上記検索ワードで3つ目に来ているサイトのものを導入する事になりそうです。検索ワード力の強化がんばります。

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

ベストアンサー

データをjsonやテキストにして、ajaxで読み込んで該当箇所を書き換えればよいのでは？

追記

具体的な例

例えばこんな感じで

main.htm

HTML
1<script>
2$(function(){
3  $.get("menu.htm",function(data){$('#menu').html(data);});
4  $.get("header.htm",function(data){$('#header').html(data);});
5  $.get("lsidebar.htm",function(data){$('#lsidebar').html(data);});
6  $.get("foot.htm",function(data){$('#foot').html(data);});
7});
8</script>
9<div id="menu"></div>
10<div id="header"></div>
11<div id="lsidebar"></div>
12<div id="content">本文~なんたらかんたら</div>
13<div id="foot"></div>

menu.htm

※必要な部分だけ書き出したhtml

HTML
1<ul>
2<li>menu1</li>
3<li>menu2</li>
4<li>menu3</li>
5<li>menu4</li>
6</ul>

投稿2017/10/26 06:53

編集2017/10/26 07:39

yambejp

総合スコア114863

退会済みユーザー

2017/10/26 07:11

回答ありがとうございます！具体的な例をあげて説明しているサイトへ誘導していただけると助かります。

yambejp

2017/10/26 07:38

追記しておきました

退会済みユーザー

2017/10/26 08:50

サンプルありがとうございます！試してみたのですが、ヘッダーに内蔵していたメニューがスクロールしても付いてこなくなってしまったのでメニューだけ下記サイトのもので代用して、サイドバーとヘッダーはyambejpさんから教えて頂いたものを使用する事にしました。 http://affiliate.ks-product.com/javascript-common-parts-external/

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

html
1<div>
2  <script type="text/javascript">
3     sukinaName();
4  </script>
5</div>

js
1function sukinaName(){
2  $.ajax({
3    url: "/anatanoDirectory/importShitai.html",//呼び出すhtmlファイルへのルートパス
4    cache: false,//.ajaxGETのキャッシュの削除
5    async: false,//同期処理
6    success: function(url){document.write(url);}//書き込み
7  });
8}