Wie wird ein Link für eine Webseite mit einem bestimmten Inhalt erstellt, der aus einer anderen HTML-Datei importiert wurde?

Question

Ich habe eine Website, die aus 6 HTML-Seiten besteht. Die Hauptseite ist (index.html). Es gibt einige <li> Elemente im Navigationsmenü, die den Inhalt aus einer anderen HTML-Datei importieren, zum Beispiel die Kontaktseite.

Wenn auf <li><a>Contact</a></li> geklickt wird, bleiben das Navigationsmenü (Kopfzeile) und die Fußzeile unverändert, nur der Inhalt zwischen ihnen wird mit dem Inhalt von "contact.html" geändert. Es funktioniert gut, wenn ich die Homepage besuche und dann auf "Kontakt" im Navigationsmenü klicke, aber was ist, wenn ich diese Seite direkt besuchen möchte?

Zum Beispiel wenn ich www.mywebsite.com/contact besuche Ich finde die Kopfzeile, den Inhalt der Kontaktseite und die Fußzeile. Denn wenn ich www.mywebsite.com/contact.html besuche, finde ich einfach den HTML-Inhalt ohne irgendein Styling oder irgendetwas. Ist das möglich oder muss ich den Kopf- und Fußzeilencode für alle Seiten hinzufügen?

Answer 1

Hier ist eine Idee für den Einstieg in eine DIY-Lösung.

1. Überprüfen Sie auf jeder einzelnen Seite, ob ein Abfrageparameter namens "router" vorhanden ist. Here's a good way to check for that.
2. Wenn es keine solche Abfrageparameter ist, replace the window Standort der Indexseite, aber mit dem entsprechenden Hash (zB index.html # contact)
3. Innerhalb der index.html-Seite, verwenden Sie die hash in den entsprechenden ziehen Seite, aber stellen Sie sicher, wenn Sie über Ajax geladen werden, laden Sie mit dem Router-Parameter (dh stellen Sie sicher, dass die URL der Kontaktseite als contact.html geladen wird? router = true).