<質問本題>
ヘッダー・フッター・フローティングメニュー・サイドバーを別htmlファイルにして、変更があった場合の手間を省きたい
<条件要望等>
- サーバーに左右されない(PHPやSSIの使用可否など)
- Gulpのようにコマンドプロンプトを使わない
- iframeは使用しない方が良さそう?なので今回は除外でお願いします
- 出来るだけ導入が簡単なものでお願いします
<扱えるもの>
- html
- css
- jQuery
- Javascript
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
Javascript 共通パーツ
辺りで検索して出てくる上位のページはどれも参考になる(ほぼそのまま使える)かと思います。
投稿2017/10/26 07:36
総合スコア18713
0
ベストアンサー
データを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総合スコア114863
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/26 07:38
退会済みユーザー
2017/10/26 08:50
0
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}
このセットを増殖する事でいくつでもインポートできました。
回答を下さったみなさまありがとうございました!
投稿2017/10/28 16:13
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
このサイトに従うと楽にできるみたいです。
http://d.hatena.ne.jp/kenpoco/20080501/1209636103
投稿2017/10/26 06:41
総合スコア928
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/26 07:08
2017/10/26 07:43
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/26 08:51