複数の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.htmlandとfooter.html同じ場所に配置しますindex.html
<a href="http://www.google.com">click here for google</a>これで、にアクセスindex.htmlすると、リンクタグをクリックできるはずです。
local file新しいバージョンのGoogle ChromeまたはIEでインポートまたは使用できないロードまたはその他の機能、理由：セキュリティ！
.breathe(in)と.breathe(out)すでに？ここでは、スクリプト言語は純粋に過剰です。
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.私はクロームで実行したときに
サーバー側インクルードを使用してヘッダーとフッターとして共通のパーツを追加します。HTMLやJavaScriptは必要ありません。代わりに、ウェブサーバーは自動的に含まれているコードを追加してから、他のことを行います。
ファイルを含める場所に次の行を追加するだけです。
<!--#include file="include_head.html" -->.shtml、.stm、.shtm。Apache、LiteSpeed、nginx、lighttpd、IISで動作します。
.shtml、.stmかつ.shtm：IISでは、すべての解析されたファイルは、例えば、SSIが含まれていてもよいです.aspx。PHPを使用する場合、同じ結果を得るには、代わりにPHP includeまたはvirtualコマンドを使用する必要があります。
JavaScriptでHTMLファイル構造を使用する必要がありますか？単純なPHPインクルードオブジェクトを使用できるように、代わりにPHPを使用することを検討しましたか？
.htmlページのファイル名を.phpに変換する場合-各.phpページの上部で、1行のコードを使用して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]私はこれを試しました：次のようなファイル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:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>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テンプレートをサポートしています。
私は小さな例を作りました：
テスト済みOKクローム61.0、オペラ48.0、オペラネオン1.0、Androidのブラウザ6.0、Chromeのモバイル61.0とAdblockerブラウザ54.0で
動作確認済みKO Safariの10.1で、Firefoxの56.0、エッジ38.14およびIE 11
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 Rocksの投稿でより多くの例を入手できます
私はC＃/ Razorで作業しており、自宅のラップトップにIISセットアップがないため、プロジェクトの静的マークアップを作成するときにビューに読み込むJavaScriptソリューションを探しました。
「jqueryを破棄する」方法を説明しているWebサイトを偶然見つけました。このサイトのメソッドは、プレーンな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に対する優れたバニラJavaScriptソリューションであるため、単に参照しています。元のコードはここにあります：http : //gomakethings.com/ditching-jquery#get-html-from-another-page
2018年からのアロハ。残念ながら、あなたと共有するクールで未来的なものはありません。
ただし、jQuery load()メソッドが現在機能していないことをコメントしている人には、ローカルWebサーバーを実行せずにローカルファイルでメソッドを使用しようとしている可能性があることを指摘しておきます。そうすることで、このような負荷法によって作製とクロスオリジン・リクエストのみのようなプロトコル方式でサポートされていることを指定上記の「クロス起源」エラー、スローされhttp、data、または https。（私はあなたが実際のクロスオリジンリクエストを行っていないことを前提としています。つまり、header.htmlファイルはあなたがリクエストしているページと同じドメインに実際にあります）
したがって、上記の承認された回答が機能しない場合は、Webサーバーを実行していることを確認してください。急いでいる場合（そして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:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>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>この質問が最初に尋ねられてから利用可能になった別のアプローチは、reactrb-express（http://reactrb.orgを参照）を使用することです。これにより、クライアント側でRubyでスクリプトを記述し、HTMLコードをRubyで記述されたReact コンポーネントで置き換えることができます。
含めるHTMLを.htmlファイルに保存します。
Content.html
<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>HTMLを含める
HTMLを含めるには、w3-include-html属性を使用します。
例
<div w3-include-html="content.html"></div>JavaScriptを追加する
HTMLインクルードはJavaScriptによって行われます。
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
}
</script>ページの下部でincludeHTML（）を呼び出します。
例
<!DOCTYPE html>
<html>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
includeHTML();
</script>
</body>
</html>