ヘッダーファイルとフッターファイルを複数のHTMLページに含めるようにする
私はいくつかのHTMLページに含まれる共通のヘッダーとフッターのページを作成したいです。
JavaScriptを使いたいのですが。 HTMLとJavaScriptのみを使用してこれを行う方法はありますか？
私は別のHTMLページ内にヘッダーとフッターのページをロードしたいです。
これは jquery で実現できます。
このコードをindex.htmlに配置します。
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
そして、このコードをheader.htmlおよびfooter.htmlのindex.htmlと同じ場所に配置します。
<a href="http://www.google.com">click here for google</a>
index.htmlにアクセスすると、リンクタグをクリックできるはずです。
あなたはJavaScriptでhtmlファイル構造を使わなければなりませんか？単純なPHPインクルードオブジェクトを使用できるように、代わりにPHPを使用することを検討しましたか。
あなたの.htmlページのファイル名を.phpに変換するなら - あなたのそれぞれの.phpページの一番上にあなたのheader.phpからのコンテンツを含めるために一行のコードを使うことができます
<?php include('header.php'); ?>
Footer.phpファイルの内容を含めるには、各ページのフッターでも同じようにします。
<?php include('footer.php'); ?>
JavaScript/Jqueryや追加のインクルードファイルは必要ありません。
注意：.htaccessファイルで次のようにして.htmlファイルを.phpファイルに変換することもできます。
# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_Host}/$1 [R=301,L]
# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
私はServer Side Includesを使ってヘッダとフッタとして共通部分を追加します。 HTMLやJavaScriptは必要ありません。代わりに、Webサーバは自動的にインクルードコードを追加してから他の処理を行います。
ファイルを含める場所に次の行を追加するだけです。
<!--#include file="include_head.html" -->
私はこれを試してみました：ファイルを作成header.htmlのように
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Your application</title>
HTMLページにheader.htmlを含めます。
<head>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
完璧に動作します。
あなたはまた置くことができます：（load_essentials.js :)
document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>
<script src="load_essentials.js"></script>私は、この質問に対する答えは古すぎると思います...現在、いくつかのデスクトップおよびモバイルブラウザはこれを行うためのHTMLテンプレートをサポートしています。
私は小さな例を作りました：
Chrome 61.0、Opera 48.0、Opera Neon 1.0、Android Browser 6.0、Chrome Mobile 61.0、およびAdblocker Browser 54.0でテスト済み
Safari 10.1、Firefox 56.0、Edge 38.14およびIE 11でテスト済みのKO
canisue.com のより多くの互換性情報
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Template Example</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="autoload-template.html">
</head>
<body>
<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>
</body>
</html>
autoload-template.html
<span id="template-content">
Template Hello World!
</span>
<script>
var me = document.currentScript.ownerDocument;
var post = me.querySelector( '#template-content' );
var container = document.querySelectorAll( '.template-container' );
//alert( container.length );
for(i=0; i<container.length ; i++) {
container[i].appendChild( post.cloneNode( true ) );
}
</script>
styles.css
#template-content {
color: red;
}
.template-container {
background-color: yellow;
color: blue;
}
あなたはこれでより多くの例を得ることができます HTML5ロックスのポスト
私はC＃/ Razorで働いていて、自宅のラップトップにIIS設定がないので、私たちのプロジェクト用に静的マークアップを作成しながらビューにロードするJavaScriptソリューションを探しました。
私はウェブサイトで "ditching jquery"の方法について説明しました。それは、サイト上の方法がプレーンJane javascript（記事の下部にある参照リンク）で正確に行っていることを示しています。本番環境でこれを使用する予定がある場合は、セキュリティの脆弱性と互換性の問題を必ず調査してください。私はそうではないので、私は自分自身でそれを調べたことはありません。
JS関数
var getURL = function (url, success, error) {
if (!window.XMLHttpRequest) return;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status !== 200) {
if (error && typeof error === 'function') {
error(request.responseText, request);
}
return;
}
if (success && typeof success === 'function') {
success(request.responseText, request);
}
}
};
request.open('GET', url);
request.send();
};
内容を取得する
getURL(
'/views/header.html',
function (data) {
var el = document.createElement(el);
el.innerHTML = data;
var fetch = el.querySelector('#new-header');
var embed = document.querySelector('#header');
if (!fetch || !embed) return;
embed.innerHTML = fetch.innerHTML;
}
);
index.html
<!-- This element will be replaced with #new-header -->
<div id="header"></div>
views/header.html
<!-- This element will replace #header -->
<header id="new-header"></header>
ソースは私自身のものではありません、それはOPへの良いVanilla javascriptソリューションであるので私はそれを単に参照しています。元のコードはここにあります： http://gomakethings.com/ditching-jquery#get-html-from-another-page
この質問が最初に聞かれてから利用可能になったもう一つのアプローチはreactrb-expressを使うことです（ http://reactrb.org を見てください）クライアント側のRuby、あなたのhtmlコードをRubyで書かれた反応コンポーネントで置き換える。
2018年のアロハ。残念ながら、私はあなたと共有するためにクールまたは未来的なものを持っていません。
しかし、jQueryのload()メソッドが現在は機能していないとコメントしている人は、ローカルWebサーバーを実行せずにローカルファイルでこのメソッドを使用しようとしているのかもしれません。これを行うと、上記の "cross Origin"エラーが発生します。これは、loadメソッドによるリクエストなどのCross Originリクエストは、http、data、httpsなどのプロトコルスキームでのみサポートされることを指定します。 （私はあなたが実際にクロスOriginリクエストをしているのではないと仮定しています、すなわちheader.htmlファイルは実際にあなたがそれをリクエストしているページと同じドメインにあります）
それで、上記の受け入れられた答えがあなたのために働いていないならば、あなたがウェブサーバを動かしていることを確認してください。あなたがRush（そしてPythonがプリインストールされているMacを使っている）でいるならば、それをする最も速くて簡単な方法は単純なPython httpサーバを起動することでしょう。あなたはそれがとても簡単であることがわかります ここで 。
これが役に立つことを願っています！
スクリプトやリンクをヘッダーに読み込むこともできます。上記の例の1つを追加します。
<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');
document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";
<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>
<script src="load_essentials.js"></script>