Frage von MoinMoin2014, 76

Webseite - Eine "View" definieren und dort verschiedene Inhalte laden lassen?

Vorab: ich weiß wie 'ne Webseite funktioniert und arbeite auch mit HTML und Scripten, muss meine Frage aber so primitiv formulieren, weil ich den Fachbegriff hierfür nicht kenne

Es ähnelt den dynamischen Inhalten mit PHP, wo der Header und Footer bleibt und sich nur der Seiteninhalt ändert

Also:

ich habe 'ne Leiste oder auch Navigation, wo meinetwegen "Infos", "Bilder" und "Videos" gelistet sind.

Die Seite hat einen statischen Inhalt, der auch bleiben soll und beim Aufruf von "Bilder" nicht neugeladen werden soll. Da dachte ich an eine Art Iframe, der einfach den Inhalt von "Bilder.html" lädt, während alles so bleibt wie es ist.

Jetzt brauche ich ja aber eine Art Container wie DIV oder halt eben eine Iframe, um den Inhalt von "Bilder.html" dort reinladen zu lassen und dazu müsste ich noch in der Navigation den Teil "Bilder" aktiv schalten, zum Beispiel farblich hervorheben.

Wie könnte ich das machen?

Antwort
von LeBonyt, 32

Da gibt es viele Möglichkeiten.

Du kannst zum Beispiel den Inhalt von Bilder mit der Funktion

$inhalt=file_get_contents('dateiname.html') einlesen und anschließend mit echo ausgeben.

Die eingelesene Datei sollte keine <HEAD>,<BODY> oder <HTML> enthalten, dise hast Du ja schon im Footer, Header definiert.

Noch einfacher geht es mit include().

Nun möchtest Du aber das die Navigation stehenbleibt und nur der Inhalt wechselt. Das macht man mit sogenannten AJAX Calls. JQuery bietet ein gutes Framework dazu. Hierzu rufts du per Javascript ein PHP Script per Ajax Request auf und und als Response kriegst du den Inhalt der Website, den du anschließend in den DOM Tree per Javascript einfügst. Die Aktivierung des Menues kannst  auch mit JavaScript/Jquery ganz einfach machen.

Antwort
von Minilexikon, 12

Das, was du suchst, nennt sich Templating. Es gibt da ganz verschiedene Engines, die dir das ermöglichen (Closure SoyNunjucks, Marionette/Backbone, AngularJS, etc.) oder du machst das selbst.

Grundsätzlich arbeitest du mit oft Platzhaltern, die dann durch die Daten aus dem Template (HTML-Datei, Datenbankdatensatz, json/xml) ersetzt werden.

HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Head -->
</head>
<body>
    <header>{{Header}}</header>
    <nav>{{Navigation}}</nav>
    <main>{{Content}}<main>
</body>
</html>

So könnte das beispielsweise aussehen.

Es gibt die Möglichkeit, die Templates auch direkt im HTML-Dokument zu erstellen: http://codepen.io/Minilexikon/pen/zqVWLE

Wenn du mit einem Objekt arbeiten willst, sieht das so aus: http://codepen.io/Minilexikon/pen/NNZYeG

Ansonsten gibt es auch noch sogenannte HTML-Precompiler wie Jade oder Haml.

Antwort
von DerMaddin, 39

Was du suchst, ist ein Website-Aufbau mit dynamischem Content.

https://css-tricks.com/dynamic-page-replacing-content/

Ein Tutorial mit Files zum herunterladen und nachvollziehen.

Wenn es sich bei dem dynamischen Inhalt um den Hauptinhalt der Webseite handelt (also den Sub-Seiten), dann ist mMn die größte Schwierigkeit, immer die Website-URL aktuell zu halten, deswegen kommen in dem Tutorial neben jQuery auch noch ein paar weitere Plugins zum Einsatz.

Kommentar von MoinMoin2014 ,

HA! Genau das selbe hatte ich gerade probiert! Nachvollzogen habe ich es und auch nachgeahmt, jedoch funktioniert das bei mir nicht so ganz, aber da muss ich mich noch weiter reinarbeiten, aber fettes Dankeschön! :)

Antwort
von webflexer, 44

Am besten mit JavaScript und einem AJAX aufruf. Das ganze kannst du mit der JavaScript-Bibliothek jQuery relativ einfach umsetzen.

Kommentar von MoinMoin2014 ,

Ich bin schon an was ähnlichem am werkeln, kann sein, dass ich's gleich habe, dennoch danke

Kommentar von MoinMoin2014 ,

Genauere Instruktionen wären jedoch hilfreicher :)

Kommentar von webflexer ,
Kommentar von DerMaddin ,

die ebenfalls von ihm kam ;D

Kommentar von webflexer ,

Einige lernen es NIEEEE :D

Kommentar von MoinMoin2014 ,

Danke, sehr aufmerksam hust xD

Kommentar von webflexer ,

Du solltest das auch mal sein, ich meine AUFMERKSAM, dann müsstest du nicht die Fragen 1000 mal stellen :D

Kommentar von MoinMoin2014 ,

Achmann, ich krieg's nicht mal mit Iframes hin, ich bin zu dämlich dafür, verf*cktes Javascript, man ist nur am Verzweifeln mit so 'nem Zeug -___-

Kommentar von webflexer ,

Ist nicht so schwer. Kann dir ja mal ein Beispiel zuschicken.

Keine passende Antwort gefunden?

Fragen Sie die Community