nicht angemeldet
Rolf BHallo jQuietsch,
Ich hantiere mit einigen zig Seiten, die gerne jeweils separat gestalte.
"mach ich gerne so" ist kein Kriterium für gute Architektur ;)
Copy 'n Paste würde eine einzige Riesendatei produzieren,
So war's nicht gemeint. Wenn Du nur ganz wenig Seiten gehabt hättest, dann wäre der Inhalt aus einer alten Datei mit Copy+Paste in die neue übertragen worden, und du hättest statt - beispielsweise - 4 alten iframe-Komponenten 4 neue HTML-Dateien ohne iframes gemacht. Aber bei "einige zig" ist das nicht zielführend. Du würdest ja das Intro jedesmal neu machen. Wobei - das könnte man dann mit Server Side Include hinzuladen.
Wie bekomme ich ein lokale htm-Seite in einen Container.
Deswegen fragte ich ja nach den Grundlagen, auf denen Du aufbaust. Wo kommen die Inhalte her.
Wenn Du die einzelnen htm Dateien unverändert behalten willst: Mit iframe. Alles andere ist Arbeit. Die Frage ist dann immer: wer bezahlt es und wem nützt es.
Ich kann mir zwei Ansätze mit clientseitigem Script vorstellen.
Ansatz 1: dynamischer Umbau der vorhandenen Inhaltsseiten.
Sicherlich haben deine aktuellen, einige zig HTM Seiten ein halbwegs einheitliches Layout. Wenn nicht, könnte man das herstellen, so, dass außerhalb des eigentlichen Inhaltsteils alles gleich ist? Sie sind ja im Moment dazu da, in einen iframe geladen zu werden, und werden darum recht spartanisch sein.
Mal angenommen, das sähe so aus:
<!doctype html>
<html lang=de">
<head>
<title>Dings Dings Bums</title>
<link rel="stylesheet" href="site.css">
</head>
<body>
<h2>Dings Dings Bums</h2>
<p>Lorem Ipsum</p>
</body>
<!-- add magic here -->
</html>
Dann könnte ich mir vorstellen, dass man an der Stelle, wo ich die Magie markiert habe, ein Script einsetzt:
<script src="embed_to_frame.js"></script>
und dieses Script baut die Seite um. Es merkt sich den Inhalt des body (innerHTML), ersetzt den Body durch das HTML der Rahmenseite ersetzt und setzt in ein HTML Element der Rahmenseite den gemerkten Inhalt wieder ein. Dafür braucht man nicht einmal jQuery:
// embed_to_frame.js
let oldContent = document.body.innerHTML;
document.body.innerHTML = ".....<article id="placeholder"></article>.....";
document.getElementById("placeholder").innerHTML = oldContent;
</script>
Die Kunst ist natürlich der Aufbau des neuen Rahmen-HTML, aber das schreibt man einmal und dann ist gut. Das Script sollte ganz bewusst extern sein, damit man das HTML der Rahmenseite nur an einer Stelle hat.
Du kannst das HTML der Rahmenseite, statt es in einen String zu legen, auch per jQuery laden, dann musst Du das HTML nicht in einen langen Stringwurm packen und kannst es mit deinem Lieblings-HTML-Editor bearbeiten.
let oldContent = document.body.innerHTML;
$(document.body).load("seitenrahmen.html", function() {
$("#placeholder").html(oldContent);
});
Je nachdem, was in den Rahmen gepackt werden soll, könntest Du mit data-Attributen auf dem Body auch noch ein paar Parameter für das Script hinterlassen (Name der Logo-Datei, Name des Rahmen-HTML falls es davon verschiedene Varianten gibt, etc).
Ansatz 2: Der Rahmen lädt den Inhalt
Wenn Du bereit bist, die lokalen htm Dateien so umzugestalten, dass sie nur noch Bausteine sind, die an die passende Stelle inkludiert werden können: mit Server Side Includes oder einem serverseitigen Programm in PHP.
Oder mit clientseitigem Script, das mittels jQuery den Baustein holt und in den Container einsetzt.
<body>
<header>...intro...</header>
<main>
<aside>logo</aside>
<article id="placeholder">
</article>
</main>
<script>
let query = window.location.search;
// magic happens
$("#placeholder").load(partName)
</script>
</body>
Das setzt voraus, dass deine bestehenden Inhaltsseiten umgebaut sind, so dass sie nur noch das HTML Fragment enthalten, das in das article-Element eingesetzt werden muss. Das ist entweder Handarbeit, oder du kannst das schlau scripten. Keine Ahnung.
Die genannte Magie besteht darin, aus einem URL-Parameter wie ?part=audi_s8_rot den Namen einer Komponentendatei zu machen, z.B. audi_s8_rot.html. Das ist so schwer nicht, wenn man das URLSearchParams Objekt verwenden kann (was aber den Internet Explorer ausschließt). Andernfalls musst Du den Wert von search manuell zerlegen. Führendes Fragezeichen weg, am & Zeichen in Parameter zerlegen, jeden Parameter am = in Name und Wert zerlegen, den part-Parameter suchen. jQuery hilft Dir da nicht, das enthält nur die Umkehrung davon (.param() Funktion).
Auf diese Weise hättest Du eine Containerseite, die Du mit der URL http://example.org/showContent.html?part=foo1234 aufrufen kannst und die das im Parameter genannte Inhaltssegment nachlädt.
Rolf
sumpsi - posui - obstruxi
Matthias Scharwies
Der Martin