Statische HTML/CSS Page aktive Seite anzeigen?

Moin,

erstmal vorweg, ich bin kein Webdev, deshalb kenne ich mich damit kaum aus.
Ist es mir möglich, wenn ich keinen Webserver habe, dass ich meine Navbar so dynamisch verwenden kann, dass sie mir anzeigt, auf welcher Seite ich mich gerade befinde?

Zurzeit baue ich die Navbar in einer eigenen HTML Datei auf und binde sie dann via iframe ein. Mir ist bewusst, dass JS das alles regeln könnte, möchte aber wie gesagt einen Webserver vermeiden, da das Endprodukt ohne laufen können soll.

Ideen? Ich möchte auch nicht auf jeder Seite wieder das ganze Inhaltsverzeichnis reinschreiben, sondern am liebsten einen Single-Point-of-Truth, also eine Navigationsdatei haben.

Danke!

Answer 1

[Ireeb]

Etwas als iFrame-Einzubinden ist schonmal sehr ungewöhnlich. iFrames sollte man eigentlich nur nutzen, wenn man von einer komplett anderen Seite etwas einbinden möchte.

Hauptproblem ist, dass man nicht ohne weiteres Inhalte im iFrame manipulieren kann und auch der Inhalt im iFrame nicht auf die umgebende Seite zugreifen kann.

iFrames sind als komplett Isolierte Fenster, die nicht Teil der Webseite sind, zu betrachten.

Für die Verwendung von JavaScript ist kein Webserver notwendig - JavaScript wird direkt im Browser ausgeführt.

Mit JavaScript kannst du relativ einfach die aktuelle URL auslesen und auf Basis derer Elemente hervorheben (sofern sie nicht in einem iFrame stecken).

https://developer.mozilla.org/en-US/docs/Web/API/Location

Mit window.location.pathname kannst du die aktuellen Pfad auf der Webseite abrufen, was die Grundlage für die gewünschte Funktionalität wäre.

Mit .split("/") könntest du den Pfad in ein Array umwandeln, sodass man damit recht einfach automatisiert die Elemente hervorheben kann.

Auch einen Webserver lokal einzurichten ist dank Tools wie XAMPP sehr einfach.

Dann hättest du zumindest mal die Möglichkeit, PHP zu nutzen. Damit kann man ebenfalls Dinge wie eine automatische Navigation sowie das Einbinden sich wiederholender Inhalte umsetzen. (Letzteres wäre in PHP eine Zeile Code: Auf jeder Seite oben <?php require('header.php''); ?> reinschreiben, deinen header so wie er ist in die header.php reinhauen, und fertig.)

Woher ich das weiß: Berufserfahrung – Tätigkeit als Webentwickler in einer Digitalagentur

Comments

[Dultus, UserMod Light]

Auch einen Webserver lokal einzurichten ist dank Tools wie XAMPP sehr einfach.

Es geht nicht darum, dass es einfach ist, sondern eine Anforderung es nicht zu tun. ;-)

Mal eine Frage, ich habe dieses JS:

document.addEventListener('DOMContentLoaded', function() {
    // Fetch the navigation HTML file
    fetch('navigation.html')
        .then(response => response.text())
        .then(html => {
            // Insert the navigation HTML into the sidebar
            document.getElementById('sidebar').innerHTML = html;


            // Highlight the current page and change background color of the active tab
            const currentPage = window.location.pathname;
            const serverLinks = document.querySelectorAll('.server');
            serverLinks.forEach(link => {
                if (currentPage.endsWith(link.getAttribute('href'))) {
                    link.classList.add('active');
                    link.style.backgroundColor = "#7289da"; // Discord blurple
                }
            });
        })
        .catch(error => console.error('Error fetching navigation:', error));
});

In dem Skript zieht er sich via fetch die Navigation. Das funktioniert wohl nur mit Webserver. Hast Du eine Idee, wie ich dort herumkomme?

Answer 2

[Mirko Marek]

Hi Dultus, UserMod Light ,

erst einmal empfehle ich dir dafür keine Iframes zu verwenden. Diese sollte man tatsächslich nur nutzen wenn es nicht anders geht. Wie z.B. bei der Einbindung von Youtube, etc. Zudem können Inhalte aus Iframes normalerweiße nicht auf Inhalte der Seite zugreifen wo das Iframe eingebunden ist. JavaScript lässt das nicht zu außer bei Cross-Origin Resource Sharing. Wenn die die gleiche Domain/Quelle die Datei stammt, aber das interpretieren die Browser unterschiedlich.

Du kannst natürlich mit JavaScript die URI auslesen und abfragen wo man sich befindet. Das geht auch ohne Webserver lokal.

Die Navbar kannst du mithilfe von Ajax nachladen.

Woher ich das weiß: Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Answer 3

[SirGeiler]

Da hier sehr krass Over-Extended wird... lasse ich mal folgenden Link hier.
Ohne die PHP und einen Root-Server bei Hetzner aufzuschwatzen, sollte das deinem Ziel nahe kommen.

Versuche das doch mal für deine Zwecke umzumodeln und falls du auf Wiederstände stößt, bekommen wir das mit den anderen Klappstühlen bestimmt auf die Kette 🥴

Im Anschluss daran würde ich hingegen erst an eine separate "Sitemap" denken, was dann wesentlich leichter von der Hand geht.

Woher ich das weiß: Berufserfahrung – IT Autodidakt & DAU-Proofed als PC-Flittchen

Answer 4

[TheQ86]

Mir ist bewusst, dass JS das alles regeln könnte, möchte aber wie gesagt einen Webserver vermeiden

JS-Code läuft doch clientseitig. Es gibt sogar Frameworks für Single Page Apps.

Ich möchte auch nicht auf jeder Seite wieder das ganze Inhaltsverzeichnis reinschreiben, sondern am liebsten einen Single-Point-of-Truth, also eine Navigationsdatei haben.

Ja, das DRY-Prinzip ist denke ich mal ab > 3 Seiten schon angemessen.

möchte aber wie gesagt einen Webserver vermeiden, da das Endprodukt ohne laufen können soll.

Wie kann ich mir das vorstellen? Werden die HTML Dateien also nur lokal auf der selben Maschine zB. direkt durch Doppelklick auf die Datei aufgerufen?

Du kannst in jeden Fall mit JavaScript arbeiten und solltest es auch tun, wenn du dynamische Inhalte möchtest, oder eine Copy & Paste Orgie vermeiden willst, die zudem fehleranfällig ist.

Du musst nur ein wenig schauen, dass du "Stolpersteine" umschiffst, weil die gängigen JS Libraries gern ihre Abhängigkeiten via npm (einem Package Manager) runterladen und manche Konstrukte auf serverseitige Auslieferung optimiert sind.

Wenn man ein wenig schaut findet man aber auch da Möglichkeiten, sie so einfach sind wie ein <script> Tag einzubinden und dann ist alles da was du brauchst.

Grundsätzlich wenn du nicht so fit bist kannst du auch versuchen selbst den JS Code zu schreiben.

Woher ich das weiß: Berufserfahrung – Berufserfahrung

Comments

[Dultus, UserMod Light]

JS-Code läuft doch clientseitig. Es gibt sogar Frameworks für Single Page Apps.

Huh, stimmt. Hab's gerade nochmal getestet. Wundert mich, dass es letztes Mal nicht lief, nachdem der Server gestoppt wurde. Ein onload alert lief aber gerade. Keine Ahnung woran es lag. Muss ich wieder umbauen, damit hat sich die Frage eigentlich geschenkt.

Wie kann ich mir das vorstellen? Werden die HTML Dateien also nur lokal auf der selben Maschine zB. direkt durch Doppelklick auf die Datei aufgerufen?

Richtig. Der User bekommt eine index.html als Homepage und navigiert sich dann dort hindurch.

Grundsätzlich wenn du nicht so fit bist kannst du auch versuchen selbst den JS Code zu schreiben.

Ich bin Entwickler, JS ist kein Thema, nur mit dem ganzen Webgedöns kenne ich mich nicht genug aus - deshalb nutze ich das direkt zum lernen. :-)

Answer 5

[siliciumcarbid3]

Ich würde dir einen Weg mit JavaScript empfehlen, um das umzusetzen. JS läuft ja auch ohne Server.

Ein Link in der Navigation würde dann sinngemäß so aussehen:

<a class="contact" href="javascript:loadPage('contact');">Kontakt</a>

Dadurch, dass der Link eine Klasse hat (contact), kann man sie mit JavaScript visuell verändern. In den CSS-Styles würde man dann .active so gestalten, dass dem Benutzer klar ist, dass er jetzt diese Seite aufgerufen hat.

Die Klasse kann natürlich auch auf einem übergeordneten li-Element oder sonst was sein. Das würde im JavaScript zum Beispiel so aussehen:

function loadPage(pageName) {

  // Zuerst die Klasse "active" von allen Navigations-Elementen entfernen
  $("#navigation a").removeClass("active");
  
  // Dann die CSS-Klasse neu setzen bei dem Element, das ausgewählt wurde
  $("#navigation a."+pageName).addClass("active");
  
  // Hier weiterer Code, der die Seite aufruft.
  
}

Damit der Code funktioniert, müsste man noch jQuery im head einbinden:

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

Die Seite in einem Inlineframe aufzurufen ist eine Möglichkeit, ja. Aber wie jemand schon schreibt, macht man das eher nicht.

Falls du sowieso JavaScript und jQuery einsetzen würdest, könntest du den Seitenaufruf auch mit Ajax umsetzen. Die Funktion loadPage würde dann so aussehen:

function loadPage(pageName) {

  // Zuerst die Klasse "active" von allen Navigations-Elementen entfernen
  $("#navigation a").removeClass("active");
  
  // Dann die CSS-Klasse neu setzen bei dem Element, das ausgewählt wurde
  $("#navigation a."+pageName).addClass("active");
  
  // Hier wird der Seiteninhalt aus der Datei contact.html aufgerufen
  $.get(pageName+".html", function(data) {
	$("#page").html(data);
  });
      
}

Dieser Code ruft dann den Inhalt aus contact.html auf und fügt ihn in ein Element mit der ID "page" ein. Dadurch gäbe es auch keinen neuen Seitenaufruf beim Wechsel einer Seite.