HTMLファイルに別のHTMLファイルを含める
私は2つのHTMLファイルを持っています、a.htmlとb.htmlを仮定します。 a.htmlにb.htmlを含めたいです。
JSFでは、次のようにできます。
<ui:include src="b.xhtml" />
つまり、a.xhtmlファイルの中に、b.xhtmlを含めることができます。
どうすれば*.htmlファイルでそれを行うことができますか？
私の意見では、最善の解決策はjQueryを使用します。
a.html：
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html：
<p>This is my include file</p>
この方法は私の問題に対する単純できれいな解決策です。
JQueryの.load()のドキュメントは here です。
私の解決策は、上記の lolo に似ています。ただし、jQueryを使用する代わりに、JavaScriptのdocument.writeを介してHTMLコードを挿入します。
a.html：
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js：
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
JQueryを使用しない理由は、jQuery.jsのサイズが〜90kbであり、ロードするデータの量をできるだけ少なくしたいからです。
適切にエスケープされたJavaScriptファイルを手間をかけずに取得するには、次のsedコマンドを使用できます。
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
または、GithubでGistとして公開されている次の便利なbashスクリプトを使用するだけで、必要なすべての作業が自動化され、b.htmlからb.jsに変換されます。 https://Gist.github.com/Tafkadasoh/ 334881e18cbb7fc2a5c033bfa03f6ee6
Greg Minshall への謝辞.
上からロロの答えを広げて、たくさんのファイルをインクルードしなければならない場合は、もう少し自動化してください。
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
そしてhtmlに何かを含める：
<div data-include="header"></div>
<div data-include="footer"></div>
これにはファイルviews/header.htmlとviews/footer.htmlが含まれます。
チェックアウトHTML5のインポート Html5rocksチュートリアル および polymer-project
例えば、次のとおりです。
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
私が書いたライブラリの恥知らずなプラグはこれを解決します。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
上記は/path/to/include.htmlの内容を取り、divをそれに置き換えます。
同じフォルダーにある別のファイルを含めるための単純なサーバーサイドのincludeディレクティブは、次のようになります。
<!--#include virtual="a.html" -->
非常に古い解決策 私は当時私のニーズを満たしていましたが、ここでそれを行う方法を標準に準拠したコードで示します。
<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->
スクリプトは必要ありません。サーバサイドで手の込んだものを使う必要はありません（おそらくもっと良い方法です）
<iframe src="/path/to/file.html" seamless></iframe>
古いブラウザはシームレスをサポートしていないので、それを修正するためにいくつかのcssを追加する必要があります。
iframe[seamless] {
border: none;
}
シームレスをサポートしていないブラウザでは、iframe内のリンクをクリックすると、ウィンドウ全体ではなく frame に移動します。これを回避する方法は、すべてのリンクがtarget="_parent"を持つようにすることです。ブラウザのサポートは「十分によい」です。
代わりに、サーバー上の.htaccessファイルにアクセスできる場合は、拡張子が.htmlで終わるファイルに対してphpを解釈できるようにする簡単なディレクティブを追加できます。
RemoveHandler .html
AddType application/x-httpd-php .php .html
簡単なphpスクリプトを使用して、次のような他のファイルを含めることができます。
<?php include('b.html'); ?>
あるファイルのHTMLコンテンツをインクルードする必要がある場合、次のように動作します。
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
参照： http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
これは私を助けたものです。 b.htmlからa.htmlへのhtmlコードのブロックを追加するために、これはa.htmlのheadタグに入るべきです：
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
次に、bodyタグで、次のように一意のIDとJavaScriptブロックを使用してコンテナを作成し、b.htmlをコンテナにロードします。
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
あなたは、HTML Importsのポリフィル（ https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ）、またはその単純化されたソリューション https：// githubを使用することができます。 com/dsheiko/html-import
たとえば、ページ上でHTMLブロックをインポートすると、次のようになります。
<link rel="html-import" href="./some-path/block.html" >
ブロックには独自のインポートがあります。
<link rel="html-import" href="./some-other-path/other-block.html" >
インポーターは、SSIとほとんど同じように、ディレクティブをロードされたHTMLに置き換えます。
これらのディレクティブは、この小さなJavaScriptをロードするとすぐに自動的に提供されます。
<script async src="./src/html-import.js"></script>
DOMが自動的に準備されたときにインポートを処理します。それ以外にも、手動で実行したりログを取得したりするために使用できるAPIを公開しています。楽しい ：）
私はこれが非常に古い投稿であることを知っているので、当時いくつかの方法は利用できませんでした。しかし、これが私の非常に単純な見方です（Loloの回答に基づく）。
これはHTML5のdata- *属性に依存しているため、 "load-html"に一致するすべての.classを取得するためにjQueryのfor-each関数を使用し、コンテンツを読み込むためにそれぞれの 'data-source'属性を使用します。
<div class="container-fluid">
<div class="load-html" id="NavigationMenu" data-source="header.html"></div>
<div class="load-html" id="MainBody" data-source="body.html"></div>
<div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
W3.jsには、次のような機能があります。
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
指定されたファイルの内容を挿入するには
<!--#include virtual="filename.htm"-->
Athariの答え（最初のもの）はあまりにも決定的でした！とても良い！
しかし、もしあなたが URLパラメータ として含まれるページの名前を渡したいのであれば、この投稿には以下のものと組み合わせて使うのにとてもいい解決策があります。
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
だからそれはこのようなものになります：
あなたのURL：
www.yoursite.com/a.html?p=b.html
a.html コードは次のようになります。
<html>
<head>
<script src="jquery.js"></script>
<script>
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
$(function(){
var pinc = GetURLParameter('p');
$("#includedContent").load(pinc);
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
それは私にとって非常にうまくいった！私が助けてくれたことを願います:)
ほとんどの解決策は機能しますが、 jquery に問題があります。
問題は、コード$(document).ready(function () { alert($("#includedContent").text()); }が含まれるコンテンツを警告する代わりに何も警告しないことです。
以下のコードを書きます。私のソリューションでは、$(document).ready関数に含まれるコンテンツにアクセスできます。
（キーは含まれているコンテンツを同期的にロードすることです）。
index.htm ：
<html>
<head>
<script src="jquery.js"></script>
<script>
(function ($) {
$.include = function (url) {
$.ajax({
url: url,
async: false,
success: function (result) {
document.write(result);
}
});
};
}(jQuery));
</script>
<script>
$(document).ready(function () {
alert($("#test").text());
});
</script>
</head>
<body>
<script>$.include("include.inc");</script>
</body>
</html>
include.inc ：
<div id="test">
There is no issue between this solution and jquery.
</div>
html5rocks.com はこのことについての非常に良いチュートリアルを持っています、そしてこれは少し遅れるかもしれません、しかし私自身はこれが存在することを知りませんでした。 w3schoolsには、w3.jsという新しいライブラリを使用してこれを行う方法もあります。重要なことは、これにはWebサーバーとHTTPRequestオブジェクトを使用する必要があるということです。実際にこれらをローカルにロードしてあなたのマシンでテストすることはできません。しかし、あなたができることは、一番上のhtml5rocksリンクで提供されているpolyfillを使うか、または彼らのチュートリアルに従うことです。ちょっとしたJSマジックで、あなたはこのようなことをすることができます：
var link = document.createElement('link');
if('import' in link){
//Run import code
link.setAttribute('rel','import');
link.setAttribute('href',importPath);
document.getElementsByTagName('head')[0].appendChild(link);
//Create a phantom element to append the import document text to
link = document.querySelector('link[rel="import"]');
var docText = document.createElement('div');
docText.innerHTML = link.import;
element.appendChild(docText.cloneNode(true));
} else {
//Imports aren't supported, so call polyfill
importPolyfill(importPath);
}
これによりリンクが作成され（すでに設定されている場合は目的のリンク要素になるように変更できます）、インポートが設定され（既に持っていない限り）、その後追加されます。それはそこからそれを取り、HTMLでファイルを解析し、そしてdivの下の希望する要素にそれを追加します。 append要素から使用しているリンクまで、ニーズに合わせてこれをすべて変更できます。これが助けになったことを願っていますが、ライブラリやjQueryやW3.jsのようなフレームワークを使わずに、より新しい、より速い方法が出てきたならば、今は無関係かもしれません。
UPDATE： これにより、ローカルインポートがCORSポリシーによってブロックされていることを示すエラーがスローされます。ディープウェブの特性上、これを使用するにはディープウェブへのアクセスが必要な場合があります。 （実用的ではないという意味）
あなたはこのようなJavaScriptのライブラリjQueryでそれをすることができます：
HTML：
<div class="banner" title="banner.html"></div>
JS：
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
banner.htmlは他のページと同じドメインに配置する必要があります。そうしないと、 クロスオリジンリソース共有 ポリシーにより、Webページでbanner.htmlファイルが拒否されます。
また、JavaScriptを使用してコンテンツをロードした場合、Googleはそれをインデックスに登録できないため、SEO上の理由から必ずしも適切な方法ではありません。
現時点では、このタスクに対する直接的なHTMLソリューションはありません。 HTML Imports （恒久的にドラフト）であっても、Import！= IncludeやJSマジックが必要になるため、このことはしません。
私は最近 a VanillaJS script を書いたが、これは複雑なことなしにHTMLをHTMLに含めるためのものです。
a.htmlに入れるだけです
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>
それはopen-sourceで、アイデアを与えるかもしれません（私は願っています）
これは素晴らしい記事です 、あなたは共通のライブラリを実装することができ、1行でHTMLファイルをインポートするために以下のコードを使うことができます。
<head>
<link rel="import" href="warnings.html">
</head>
Google Polymer を試すこともできます
https://stackoverflow.com/a/31837264/4360308 の答えに基づいて、次のようにNodejs（+ express + cheerio）を使用してこの機能を実装しました。
HTML（index.html）
<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>
_ js _
function includeComponents($) {
$('.include').each(function () {
var file = 'view/html/component/' + $(this).data('include') + '.html';
var dataComp = fs.readFileSync(file);
var htmlComp = dataComp.toString();
if ($(this).data('method') == "replace") {
$(this).replaceWith(htmlComp);
} else if ($(this).data('method') == "append") {
$(this).append(htmlComp);
}
})
}
function foo(){
fs.readFile('./view/html/index.html', function (err, data) {
if (err) throw err;
var html = data.toString();
var $ = cheerio.load(html);
includeComponents($);
...
}
}
append - > divに内容を含める
replace - > divを置き換える
同じデザインに続けて、より多くの動作を簡単に追加できます
HTTPiecesはこれのためです！
私はこれをここに落とすと思いました。ラウンドトリップのTCP/HTTPオーバーヘッドを一切発生させずに、いくつかの機能を組み込みたいと思っていました。だから、私はそれをうまくやるサーバーを書いた。それは本格的な生産の準備ができていません - それは開発のためのものです、そして、他の人々がプロジェクトに貢献したならばそれは素晴らしいでしょう！
GitHub
https://github.com/justincjack/httpieces
Webサイト/ Webアプリケーションをモジュール方式で開発し、*PHPで書かれたこのサーバーを* nixマシンで実行してテストすることができます。次に来る機能は、HTTPiecesがあなたのプロダクションWebサーバのcontentディレクトリに抽出されるためにあなたのプロジェクトのコンパイルされたアーカイブを作成するコマンドライン機能です。しかし、誰かが時間や興味を持っているかどうかをチェックしてください。これを迅速かつ効率的に行えるようにしました。
Solutionを機能させるには、csi.min.jsファイルを含める必要があります。このファイルは、 here にあります。
GitHubに示されている例のように、このライブラリを使用するには、ページヘッダーにファイルcsi.jsを含める必要があります。次に、コンテナに含める値を設定したdata-include属性を追加する必要があります素子。
コードのコピーを非表示
<html>
<head>
<script src="csi.js"></script>
</head>
<body>
<div data-include="Test.html"></div>
</body>
</html>
... それが役に立てば幸い。
ES6バッククォートの使用 ``： テンプレートリテラル ！
let nick = "Castor", name = "Moon", nuts = 1
more.innerHTML = `
<h1>Hello ${nick} ${name}!</h1>
You collected ${nuts} nuts so far!
<hr>
Double it and get ${nuts + nuts} nuts!!
` <div id="more"></div>このようにして、引用符をエンコードせずにhtmlをインクルードしたり、DOMから変数をインクルードしたりすることができます。
これは強力なテンプレートエンジンです。別々のjsファイルを使用してイベントを使用してコンテンツを適切な場所にロードすることも、すべてをまとまりにしてオンデマンドで呼び出すこともできます。
let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);
これがFetch APIとasync関数を使った私のアプローチです。
<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>
<script>
const components = document.querySelectorAll('.js-component')
const loadComponent = async c => {
const { name, ext } = c.dataset
const response = await fetch(`${name}.${ext}`)
const html = await response.text()
c.innerHTML = html
}
[...components].forEach(loadComponent)
</script>
Django/bootleのようなフレームワークを使用する場合、多くの場合、テンプレートエンジンが同梱されています。ボトルを使用し、デフォルトのテンプレートエンジンが SimpleTemplate Engine であるとします。以下は純粋なhtmlファイルです
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
次のように、メインファイルにfooter.tplを含めることができます。
$ cat dashboard.tpl
%include footer
それに加えて、dashborard.tplにパラメーターを渡すこともできます。
PromiseでFetch APIを使用するもう1つの方法
<html>
<body>
<div class="root" data-content="partial.html">
<script>
const root = document.querySelector('.root')
const link = root.dataset.content;
fetch(link)
.then(function (response) {
return response.text();
})
.then(function (html) {
root.innerHTML = html;
});
</script>
</body>
</html>
PHPはサーバーレベルのスクリプト言語です。多くのことができますが、よく使用される用途の1つは、SSIとほぼ同じように、HTML文書をページ内に含めることです。 SSIと同様に、これはサーバーレベルのテクノロジです。 WebサイトにPHP機能があるかどうかわからない場合は、ホスティングプロバイダにお問い合わせください。
これは、PHP対応のWebページにHTMLのスニペットを含めるために使用できる単純なPHPスクリプトです。
あなたのサイトの共通の要素のためのHTMLを別々のファイルに保存してください。たとえば、ナビゲーションセクションをnavigation.htmlまたはnavigation.phpとして保存することができます各ページにそのHTMLを含めるには、次のPHPコードを使用します。
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
ファイルをインクルードしたいすべてのページで同じコードを使用してください。強調表示されているファイル名をインクルードファイルの名前とパスに必ず変更してください。
私はこのトピックに来て、似たようなものを探しましたが、loloが提起した問題とは少し異なります。私は他のページへのリンクのアルファベット順メニューを保持するHTMLページを構築したいと思いました、そして、他のページのそれぞれは存在するかもしれないし、存在しないかもしれません。また、Tafkadasohのように、私はjQueryでWebページを膨らませたくありませんでした。問題を調査し、数時間実験した後、関連する発言を付け加えて、私のためにうまくいったことがここにあります：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
<meta name="Author" content="me">
<meta copyright="Copyright" content= "(C) 2013-present by me" />
<title>Menu</title>
<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;
/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them. Here, there are 20.
*/
function initialize()
{ window.name="Menu";
form = document.getElementById('MENU');
for(indx=0; indx<20; indx++)
{ str = "00" + indx;
tmp = str.length - 3;
str = str.substr(tmp);
script = document.createElement('script');
script.type = 'text/javascript';
script.src = str + ".js";
form.appendChild(script);
}
/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.
The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->
(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.
Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000". When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available". This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for. Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined". Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined". More on that later.
The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded. That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/
window.setTimeout("BuildMenu();", 2000);
return;
}
//So here is the function that gets called after the 2-second delay
function BuildMenu()
{ dtno = 0; //index-counter for the "dat" array
for(indx=0; indx<20; indx++)
{ str = "00" + indx;
tmp = str.length - 3;
str = "F" + str.substr(tmp);
tmp = eval(str);
if(tmp != unde) // "unde" is deliberately undefined, for this test
dat[dtno++] = eval(str + "()");
}
/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not. Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".
Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with. The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page. A description
and a "<br />" tag gets included for each link. Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.
Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish. But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/
dat.sort();
for(indx=0; indx<dtno; indx++)
{ write = document.createElement('span');
write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
"', 'Menu');\" style=\"color:#0000ff;" +
"text-decoration:underline;cursor:pointer;\">" +
dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
form.appendChild(write);
}
return;
}
// -->
</script>
</head>
<body onload="initialize();" style="background-color:#a0a0a0; color:#000000;
font-family:sans-serif; font-size:11pt;">
<h2>
MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>
上記のすべてのソリューションには、JSが新しく組み込まれたHTMLをターゲットにできるようにするイベントフックがありません。また、多くはブラウザの互換性がありませんでした。
そのため、単純なHTMLインクルードスクリプトよりもこれらの2つの利点が必要な人のためにライブラリを作成しました。
JSライブラリは次のとおりです。 includeme.js