1つのタイプのHTMLページがたくさんありますが、唯一の違いはページタイトルと異なる.jsonファイルに保存されているデータです。他のすべては、2つの集中ファイル、.jsファイルと.htmlファイルに格納する必要があります。擬似コードでは、ページは次のようになります。n番目のページは、データファイルspecific_data_n.jsonを含むが、他のすべてが常に同じであるJSとHTMLを同時に埋め込むことができません
<html>
<head>
include global_script.js
include specific_data_n.json
</head>
<body>
include global_body.html
</body>
</html>
。
ヘッダーに.jsファイルと.jsonファイルを含める方法を知っています。しかし、私は体に.htmlファイルを含める方法を本当に知りません。私はネットで検索し、特に、この質問を見つけました：Server side includes alternative私は答えに提案されたボディーを含むさまざまな方法を試しましたが、何を試してもJSエラーがあります。
ここでは、問題の最小例を示します。まず、余分なファイルで体がメインファイル内にあり、ない作業ファイル：
function init(){document.getElementById('demo').innerHTML = '2+2=4';}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><head>
<script language="javascript" type="text/javascript" src="minimal.js"></script>
</head>
<body onload="init();">
<div id="demo">
2+2=5
</div>
</body>
</html>は今、私は1つ、次の外部ファイルに体を入れてみました上にリンクされた質問の回答の
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="minimal.js"></script>
</head>
<body onload="init();">
<!-- Content, inclusion from https://stackoverflow.com/questions/35249827/can-you-link-to-an-html-file -->
<div w3-include-html="body_minimal.html"></div>
<script>
(function() {
myHTMLInclude();
function myHTMLInclude() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
myHTMLInclude();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
})();
</script>
</body>
</html>
と含まれbody_minimal.html：
<div id="demo">
2+2=5
</div>
、Iはまたbody_minimal.htmlファイルを埋め込むための異なるさらなるアプローチを試みた（必要に応じてIが存在することができる）が、それらのどれも動作しません私はそれが根本的な問題だと考えます。私はいつもJSデバッガでエラーが表示されます。
TypeError: document.getElementById(...) is null
私はHTMLでもCSSでもない経験がないとほとんど異なるチュートリアル、フォーラム、Q & Aサイトからの&貼り付けのものをコピーしていますことを追加する必要がありますので、私はHTMLファイルの埋め込みのためにこのコードが何をしているのか本当に理解していません。 :)
問題が何であるか、そして幸せな新年を祈ってくれてありがとう！
提案していただきありがとうございます！残念ながら、このサイトはPHPをサポートしていないgithub.ioでホストされています。 – Photon
@Photon - あなたがリンクした質問で、より高い評価の回答を試してください。 – Quentin
実際には、最も評価の高い回答が最悪ですが、出力として {％include head.html％} {％include minimal_body.html％} と表示されます。他のものは、私の質問で言及されたJSのエラーにつながる... – Photon