HTML Webseite: wechselbarer Inhalt des Iframe?
Hallo zusammen,
ich habe beschäftige mich nun seit etwa einer Woche mit dem Erstellen von Webseiten und wollte mal den ersten Schritt wagen und eine Seite erstellen. Spontan bin ich auf die Idee gekommen eine Art Nachrichten Seite zu erstellen und treffe nun auf folgendes Problem: Ich möchte durch das Anklicken der einzelnen Punkte in der Navigationsleiste den Inhalt des Iframes wechseln lassen, weiß aber leider nicht wie ich das anstellen soll.
(Kann bisher nur mit HTML und CSS etwas anfangen, falls jemand einen Lösungsvorschlag mit JavaScript hat, wäre ich sehr dankbar für eine Erklärung!)
3 Antworten
Zunächst ein Hinweis auf zwei Fehler in deinem Dokument.
1) Es fehlt der Dokumenttitel im head:
<title>...</title>
2) Das br-Element darf kein direktes Kindelement vom ul-Element sein. Du könntest die br-Elemente in die li-Elemente hineinschieben. Besser wäre es allerdings, die Abstände mit CSS zu setzen. Zum Beispiel so:
.Navigationsbar > li {
margin-bottom: 20px; /* or another value */
}
(...) in der Navigationsleiste den Inhalt des Iframes wechseln lassen, (...)
Die Problematik bei einem iFrame liegt darin, dass er nicht so gut zugänglich ist.
- Wenn ich einen Link explizit im neuen Tab öffnen würde (und das machen viele Nutzer), hätte die neue Seite keine Navigation mehr, weil die Zielseite dann ganzseitig geöffnet wird.
- Bezüglich Barrierefreiheit und SEO sind iFrames eher problematisch.
- Es werden mehr Ressourcen verbraucht.
Deshalb würde ich davon abraten. Auch einen Zusammenbau der Seite im Browser mit JavaScript würde ich vorerst vermeiden, da die Seite dann ja doch etwas länger zum Laden braucht. Wie sehr, wäre natürlich vom Inhalt abhängig.
Ich würde dir für den Anfang raten:
a) Du machst einen OnePager. Also jeglicher Inhalt auf eine Seite, in der Navigation kannst du Sprungmarken einsetzen.
Ob ein OnePager tatsächlich die passende Wahl für deine Seite ist, musst du selbst beurteilen. Wenn es viele Nachrichten mit jeweils langen Artikeln gibt, wäre diese Wahl unpassend.
b) Du baust dir erst einmal eine Standardstruktur, die für alle Seiten gelten soll (oder zumindest eine für deine Unterseiten). Die enthält bereits die Einbindung deiner CSS-Datei und die Hauptpunkte der Navigation, Footer, u.a. wiederkehrendere Elemente. Den Container für den hauptsächlichen Inhalt lässt du leer. Dieses HTML-Dokument nutzt du folgend als Template. Wenn du eine neue Seite brauchst, kopierst du dir das Template und passt die Kopie deinen Vorstellungen nach an.
Aufwendig und fehleranfällig (da man eine Seite vergessen könnte) ist natürlich die Tatsache, dass man mit jeder neuen Seite auch für die bereits vorhandenen Seiten die Navigation nochmal anpassen muss, damit die neue Seite in dieser auftaucht.
Sobald du aber lernst, serverseitige Webanwendungen mit einer Sprache wie PHP zu schreiben, lässt sich das Problem alsbald einfach lösen. Ob du dies früh angehen möchtest oder nicht, musst du selbst einschätzen. Ich würde dir raten, dein Projekt zunächst klein zu halten (max. 3-4 Unterseiten reichen sicherlich vollkommen aus) und dich zunächst darauf zu konzentrieren, das Design für diese zu beschreiben. Wenn jede Unterseite einen etwas individuelleren Look haben soll, wirst du damit schon ausreichend beschäftigt sein und HTML/CSS gut üben können.
Vorweg: JavaScript für die Navigation nutzen ist bäh, mach das nie. Damit schließt du alle aus, die das deaktiviert haben.
Ein iframe (und ein Frame) braucht einen Namen (name-Attribut). Wenn du dann bei einem Link ein Ziel (target-Attribut) angibst, wird der Link in dem iframe geöffnet.
Ein Beispiel findest du hier: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target
lol , das argument mit NIE gilt schon seit einigen jahren nicht mehr . Javascriptframeworks nutzen fast alle . sorry aber du bist nicht mehr im 20 Jahrhundert sondern im 21 Jahrhundert .
viele programmieren alles nur noch in JavaScript
Javascript 1.0 war unsicher , aber danach hat man das gefixt was es an problemen gab . origin sei dank
Ok, vielen Dank für die schnelle Rückmeldung, wie gesagt, bin noch ein Anfänger, was hälst du von dieser Idee:
statt den Iframe würde ich per
<a href="interneDatei.html"> Name </a
zu dem jeweiligen Reiter weiterleiten und in diese interne Datei einfach die Startseite kopieren und den jeweiligen Text hinzufügen.
komm mal gleich weg von der idee eines iframes , das wird dir noch ewig viele schwierigkeiten bereiten . und nein wenn macht man die navigation dann auf jede seite . wenn du dann irgendwann mehr kannst und via server site script arbeitest kannst du es dann leicht einbinden . oder bastelst dir was mit javascript , aber dazu mussu dann schon mal grundkurs programmierung machen .
iframes ausschließlich für externe inhalte , wie google maps oder so .
Ok, vielen Dank für die schnelle Rückmeldung, wie gesagt, bin noch ein Anfänger, was hälst du von dieser Idee:
statt den Iframe würde ich per
<a href="interneDatei.html"> Name </a
zu dem jeweiligen Reiter weiterleiten und in diese interne Datei einfach die Startseite kopieren und den jeweiligen Text hinzufügen.