Seiteninhalte nur in Frames laden

[Timur]

Hallo Zusammen,

ich hab da ein kleines Problem, bzw. eher eine Herausforderung. Auf meiner Seite www.itservice-kaya.de möchte ich den Inhalt der Seite immer nur in dem dunklen Kasten anzeigen, ohne dass die ganze Page geladen wird. Sprich ich klicke auf Kontakt oder Impressum wenn ich auf der Startseite bin, dann soll der Hintergrund bleiben, des bestehende Inhalt ausgeblendet werden und der neue eingeblendet werden.

Ich bin html mäßig nicht mehr so ganz fit, bin schon ne ganze ecke raus aus der Sache.. Wie mach ich das am besten? mit Frames? Ich glaub nicht dass ich damit zum Ziel komme irgendwie, zumindest hab ich nix passendes gefunden. Ist das mitlwerweile nicht auch schon sehr Oldschool? :)

Gibt es dazu alternativen? Jquery? damit kenn ich mich aber leider nicht aus ^^"

Über jede Hilfe bin ich sehr dankbar :)

Grüße,

Timur

[Auge]

Hallo

ich hab da ein kleines Problem, bzw. eher eine Herausforderung. Auf meiner Seite www.itservice-kaya.de möchte ich den Inhalt der Seite immer nur in dem dunklen Kasten anzeigen, ohne dass die ganze Page geladen wird. Sprich ich klicke auf Kontakt oder Impressum wenn ich auf der Startseite bin, dann soll der Hintergrund bleiben, des bestehende Inhalt ausgeblendet werden und der neue eingeblendet werden.

Ich bin html mäßig nicht mehr so ganz fit, bin schon ne ganze ecke raus aus der Sache.. Wie mach ich das am besten? mit Frames?

Das wäre eine unschöne Möglichkeit. Auch ein Iframe in der dunklen Seite, in dem die Inhalte dargestellt werden, ist möglich. Wenn ich sowas so machen würde, dann würde ich einen Iframe wählen.

• Vorteil: du setzt keine Zusatztechniken voraus.
• Nachteil: in Zeiten, in denen ein wesentlicher Teil der Aufrufe von Mobilgeräten aus erfolgt, musst du dir zusätzlich Gedanken zum Umgang mit dem Iframe oder den Frames machen. Das ist ein nicht zu unterschätzender Aufwand.

Gibt es dazu alternativen? Jquery? damit kenn ich mich aber leider nicht aus ^^"

Jquery ist nur eine JS-Bibliothek, mit der man Ajax-Aufrufe per JS vereinfachen kann. Geht also auch mit purem JS. Mit Ajax werden Ressourcen auf dem Webserver abgefragt, die Inhalte zurückliefern, ohne die Seite erneut vom Server zu laden. Diese Inhalte werden nach der Antwort in die bestehende Seite eingebaut. All das wird, wie gesagt, mit JS erledigt.

• Vorteil: Kein Heckmeck mit (I)Frames
• Nachteil (wenn auch ein heutzutage kleiner): Du bist abhängig von einer Zusatztechnik (JS)

Du kannst natürlich auch Seiten bauen, deren Inhalt jeweils in einem Container liegt, der nicht den ganzen Viewport einnimmt und eigene Scrollbalken hat. Das Drumherum kannst du dann anmalen, wie du lustig bist, z.B. eben dunkel. Beim Seiten laden fällt das natürlich auf.

• Vorteil: keine Abhängigkeiten, größtmögliche Flexibilität
• Nachteil: Beim laden einer Seite ist der dunkle Rahmen nicht durchgängig da.

Tschö, Auge

[Timur]

Hallo Auge,

tausend dank für deine schnelle Antwort! Das klingt soweit alles total plausibel, bin schon wieder schlauer :)

Das mit den Frames dachte ich mir so schon, jetzt hab ich Gewissheit ;)

Am Sympathischen erscheint mir hier eindeutig die JS Variante zu sein. Jedoch sind meine Kenntnisse hier eher gen Null :( Hättest du mir vll noch ein paar Tipps nach was ich da genau suchen könnte oder vll gleich 1-2 links? das wäre klasse :) Die technische Hürde ist relativ schnell genommen, die Kiste kann JS.

Danke schonmal!

Gruß,

Timur

[Auge]

Hallo

Am Sympathischen erscheint mir hier eindeutig die JS Variante zu sein. Jedoch sind meine Kenntnisse hier eher gen Null :( Hättest du mir vll noch ein paar Tipps nach was ich da genau suchen könnte oder vll gleich 1-2 links? das wäre klasse :)

Zielführende Suchbegriffe hat dir Dennis schon genannt, Anregungen für Verbesserungen auch.

Die technische Hürde ist relativ schnell genommen, die Kiste kann JS.

Frage: Ist serverseitig eine Programmiersprache (z.B. Perl, PHP, Python) und Erfahrung im Umgang damit vorhanden? Ich frage nur, weil es nach der Erreichung der Funktionstüchtigkeit von Ajax-Skripten („Lade vorbereitete, statische Inhalte vom Server nach!“) recht schnell zum Wunsch nach dynamisch erzeugten, aktuellen Inhalten („Lade den aktuellen $irgendwas-Bericht nach!“) kommt.

Das ist fast so sicher wie die Katholischkeit des Papstes.

Tschö, Auge

[Timur]

Hallo Auge,

danke nochmal!

PHP läuft auf der Kiste, nutze das z.b. für den Maliversand beim Kontaktformular. Perl usw. ist nicht drauf. Der Bedarf nach dynamischen Inhalten ist hier relativ gering, aber ich weiß schon was du meinst! Aber hier gibt es ja zur not noch ein Serverupdate ;)

Gruß, Timur

[Gunnar Bittersmann]

@@Auge

Jquery ist nur eine JS-Bibliothek, mit der man Ajax-Aufrufe per JS vereinfachen kann. Geht also auch mit purem JS. Mit Ajax werden Ressourcen auf dem Webserver abgefragt, die Inhalte zurückliefern, ohne die Seite erneut vom Server zu laden. Diese Inhalte werden nach der Antwort in die bestehende Seite eingebaut. All das wird, wie gesagt, mit JS erledigt.

„Das alles und noch viel mehr …“^[1]

Außerdem wird mit History-API nämlich der URI in der Adresszeile manipuliert, damit man den geänderten Inhalt auch weitergeben und bookmarken kann. Und damit der Browser-Back-Button funktioniert.

Wenn man das vergisst (lies: wenn man sich darüber nicht im Klaren ist), baut man unbenutzbare™ Seiten.

LLAP

---

1. Rio Reiser, „König von Deutschland“ ↩︎

[Der-Dennis]

Hallo Timur,

dafür gibt es einige Möglichkeiten. (Inline-)Frames sind grundsätzlich eine Möglichkeit, auch jQuery (JavaScript) oder andere Frameworks kannst Du verwenden. Suche mal nach "Single-page application" (SPA) oder ähnlichem, da solltest Du einiges finden, was Dich weiter bringt. Wenn die Inhalte dynamisch vom Server geladen werden sollen, könnte unter anderem "Ajax" (Asynchronous JavaScript and XML) ein weiteres Stichwort für Dich sein. Ansonsten einfach nochmal hier nachfragen.

Gruß Dennis

Ps: Und um Dir die Arbeit später zu erleichtern, würde ich zuerst mal Deinen Quellcode optimieren. Sowas wie

<p
				class="h1 gold">
					<br>IT Service Timur Kaya
				</p>

sieht nicht so toll aus. Zum Beispiel brauchst Du Elemente wie <br> hier nicht, Abstände kannst Du mit CSS definieren. Und Klassen sollten außerdem möglichst sprechende Namen haben. Solltest Du mit "h1" eine Überschrift meinen, verwende lieber das passende Element. Im Wiki findest Du darüber hinaus einige nützliche Dinge und Elemente.

[Timur]

Hallo Dennis,

vielen Dank, da schmeiß ich gleich mal google an! :)

Ich bin gerade schon dabei den Quelltext zu optimieren bzw. auszumisten, danke trotzdem für deine Hinweise! Durch das gebastle ist da jetzt natürlich viel seltsames drin, da hast du vollkommen recht!

Danke und Grüße,

Timur