Hallo Community,
eins vorweg, ich habe keinerlei Erfahrung mit HTML und JS, bin aber in einer Situation, wo ich etwas zusammenschustern soll, das irgendwie funktioniert. Deshalb bin ich bisher so vorgegangen, wie ich in solchen Fällen immer vorgehe: Google anschmeißen und aus Manuals und Foren copy&pasten, bei Problemen versuchen zu verstehen, wie es funktionieren soll und warum es das nicht tut. Nach vielen Problemen und Fehlern, die ich bisher auf diese Art lösen konnte, hänge ich nun an einem, das mit dieser Methode wohl nicht zu lösen ist.
Das Problem ist folgendes: Ich möchte viele gleichartige Seiten haben, die alle gleich aufgebaut sind, der einzige Unterschied ist der Inhalt einer json-Datei, die im Header eingebunden wird. Nun würde ich gerne so etwas realisieren:
Auf diese Art könnte ich Header und Body in den entsprechenden Dateien anpassen, ohne viele Dateien bearbeiten zu müssen.
Das Problem ist: Es funktioniert nicht. Es wird einfach der Text
auf einem weißen Hintergrund angezeigt. Den Code-Schnippsel habe ich übrigens aus der ersten Antwort hier: http://stackoverflow.com/questions/22326742/server-side-includes-alternative
Die anderen Antworten habe ich auch schon alle durch. Zum Beispiel der Vorschlag in der letzten Antwort (wo erst mal nur der Body ausgelagert wird):
Dort funktioniert mehr: Die Webseite wird grundsätzlich angezeigt, aber die im Header eingebundenen .js-Dateien werfen Fehler:
http://pix.toile-libre.org/upload/original/1483181736.png
Spannend ist, dass der Fehler nicht in 100% der Fälle kommt, manchmal (selten) funktioniert alles aus irgendeinem Grund. Das ist für mich völlig unerklärlich und mysteriös...
Hier ist, wie die Seite eigentlich aussehen sollte: https://serlo-graphs.github.io/JIT/Graphs/testgraph.html
Und hier ist, was passiert, wenn ich versuche den Body auszulagern: https://serlo-graphs.github.io/JIT/Graphs/testgraph_ausgelagert.html
Ich würde am liebsten ein Minimalbeispiel präsentieren, bei dem das Problem auftaucht, da der Fehler aber in den JS-Libraries verwurzelt zu sein scheint, ist mir das bisher nicht gelungen. Wäre super, wenn sich jemand das Problem trotzdem anschauen und hilfreiche Tipps geben könnte!
Viele Grüße und einen guten Rutsch ins neue Jahr!
Photon
eins vorweg, ich habe keinerlei Erfahrung mit HTML und JS, bin aber in einer Situation, wo ich etwas zusammenschustern soll, das irgendwie funktioniert. Deshalb bin ich bisher so vorgegangen, wie ich in solchen Fällen immer vorgehe: Google anschmeißen und aus Manuals und Foren copy&pasten, bei Problemen versuchen zu verstehen, wie es funktionieren soll und warum es das nicht tut. Nach vielen Problemen und Fehlern, die ich bisher auf diese Art lösen konnte, hänge ich nun an einem, das mit dieser Methode wohl nicht zu lösen ist.
Das Problem ist folgendes: Ich möchte viele gleichartige Seiten haben, die alle gleich aufgebaut sind, der einzige Unterschied ist der Inhalt einer json-Datei, die im Header eingebunden wird. Nun würde ich gerne so etwas realisieren:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Header einbinden, für alle Seiten gleich -->
{% include ../includes/head.html %}
<!-- Daten einbinden, für jede Seite anders -->
<script language="javascript" type="text/javascript" src="data.json"></script>
</head>
<body onload="init();">
<!-- Body einbinden, für alle Seiten gleich -->
{% include ../includes/body.html %}
</body>
</html>
Auf diese Art könnte ich Header und Body in den entsprechenden Dateien anpassen, ohne viele Dateien bearbeiten zu müssen.
Das Problem ist: Es funktioniert nicht. Es wird einfach der Text
Code:
{% include ../includes/head.html %} {% include ../includes/body.html %}
auf einem weißen Hintergrund angezeigt. Den Code-Schnippsel habe ich übrigens aus der ersten Antwort hier: http://stackoverflow.com/questions/22326742/server-side-includes-alternative
Die anderen Antworten habe ich auch schon alle durch. Zum Beispiel der Vorschlag in der letzten Antwort (wo erst mal nur der Body ausgelagert wird):
HTML:
<!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" />
<!-- CSS Files -->
<link type="text/css" href="../css/base.css" rel="stylesheet" />
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="../includes/jit.js"></script>
<!-- Graph tree data -->
<script language="javascript" type="text/javascript" src="testgraph.json"></script>
<!-- Example File -->
<script language="javascript" type="text/javascript" src="../includes/graph.js"></script>
</head>
<body onload="init();">
<!-- Content, inclusion from http://stackoverflow.com/questions/35249827/can-you-link-to-an-html-file -->
<div w3-include-html="../includes/body.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>
Dort funktioniert mehr: Die Webseite wird grundsätzlich angezeigt, aber die im Header eingebundenen .js-Dateien werfen Fehler:
http://pix.toile-libre.org/upload/original/1483181736.png
Spannend ist, dass der Fehler nicht in 100% der Fälle kommt, manchmal (selten) funktioniert alles aus irgendeinem Grund. Das ist für mich völlig unerklärlich und mysteriös...
Hier ist, wie die Seite eigentlich aussehen sollte: https://serlo-graphs.github.io/JIT/Graphs/testgraph.html
Und hier ist, was passiert, wenn ich versuche den Body auszulagern: https://serlo-graphs.github.io/JIT/Graphs/testgraph_ausgelagert.html
Ich würde am liebsten ein Minimalbeispiel präsentieren, bei dem das Problem auftaucht, da der Fehler aber in den JS-Libraries verwurzelt zu sein scheint, ist mir das bisher nicht gelungen. Wäre super, wenn sich jemand das Problem trotzdem anschauen und hilfreiche Tipps geben könnte!
Viele Grüße und einen guten Rutsch ins neue Jahr!
Photon
Zuletzt bearbeitet: