Webseiten Inhalt ändern ohne Seite neuzuladen

  • Hallo zusammen,


    ich stoße im Internet in letzter Zeit immer mehr auf Seiten, bei denen man auf eine Unterseite "springen" kann, ohne, dass die ganze Webseite neugeladen wird, wie es normalerweise der Fall ist.

    Hier ein Beispiel, was ich meine: www.bayern3.de


    Dort sieht man, dass wenn man auf eine andere Seite geht, sich die Seite ändert und die URL ändert, aber nicht die ganze Seite neu lädt. Nun meine Frage: Wie setzt man so etwas um?


    Vielen Dank schon mal für Eure Hilfe im Voraus und viele Grüße!

  • Ich weiß nicht genau, was Du meinst, egal, was ich klicke, es wird die Seite neu geladen.

    Sobald sich die URI in der Adresszeile Deines Browsers ändert, ist es i.d.R. auch ein komplett neuer Request.

    Die Seite lädt nur relativ zügig, so dass Du evtl. das Gefühl hast, es würde nicht alles geladen?


    Ansonsten könnte ich Dir noch das AJAX-Prinzip nahelegen, falls Du sowas meinst.

  • Wahrscheinlich meinst du Jquery Ajax .Damit läd man sich nur Daten die man auch brauch und es wird nicht alles neu geladen.


    Was Arne sagt mußte ich auch mal gerade kucken.

    Du kannst ganz einfach erkennen ob die Seite neu geladen wird oder über Ajax geladen wird ohne die Seite komplett neu zu laden.

    Wenn die Daten über Ajax geholt werden funktioniert der Zurück Button nicht mehr. Der Funktioniert schon aber nicht für diese Seite. Bei deinen Link siehst du ja auch in der Adressleiste das da ständig neue Links drinne stehen.


    Nur eins frage ich mich auch ? Wie machen die das,das die Musik durchgehen läuft ohne ewig große Reload Pausen zu haben ? Weiß das einer.?

    Ich habe sowas auch mal gemacht das einer auf seiner Seite Musik höhren wollte und gleichzeitig surfen. Habe alles über Ajax gemacht das geht ja bestens. Aber wie machen die das da ?

  • Ich hab das, was ihr mir vorschlägt, mal ein bisschen gegoogelt und noch eine Seite gefunden, die so funktioniert: https://cuberto.com/


    Ich vermute, dass zusätzlich bei Bayern3 die URL mit geändert wird, über AJAX oder so, und so der zurück Button auch wieder funktioniert. Das ist glaub ich der Grund warum der Player auch dauerhaft durch läuft.

  • Mit JavaScript ist das es zwar möglich, die Adresszeile zu ändern, Beispiel:

    JavaScript
    var oState = { foo : "bar" };
    history.pushState( oState, "some title", "bar.html" );

    Das sorgt dafür, dass die Adresszeile von bspw. https:www.example.com/foo.html geändert wird auf https://www.example.com/bar.html, wobei aber kein neuer Inhalt geladen wird! Insofern würde die Musik natürlich weiterspielen und inhaltlich könnte Ajax dafür hergenommen worden sein.


    Ich meine aber auch mal gelesen zu haben, dass man mit Streams und dem LocalStorage auch die Möglichkeit hat Musik Request übergreifend abspielen zu lassen.

    Weiß aber ahoc nicht mehr, wo das war, musste sonst mal nach suchen.


    EDIT: Gerade noch was dazu gefunden, was die Navigation angeht, evtl. hilft das weiter:

    https://developer.mozilla.org/…b/API/History_API/Example

  • Mit JavaScript ist das es zwar möglich, die Adresszeile zu ändern, Beispiel:

    JavaScript
    var oState = { foo : "bar" };
    history.pushState( oState, "some title", "bar.html" );

    Sehr schön sowas habe ich auch gebraucht für meine Hauptseite.Da ich da das meiste über Ajax hole kann man jetzt auch den Link zu den Seiten sehen.


    Das gute ist der Zurück Button zeigt die Links davor ja auch an. So müßte man doch Theoretisch auch wieder mit Ajax die Seiten laden können ,damit das verhalten der Seite wie eine ist ohne die Ajax nutzt .?

  • Weiß ich ehrlich gesagt nicht, habe das im Prinzip noch nie gebraucht. Musst Du mal testen.

    Es gibt - informativ erwähnt - auch noch history.replaceState(), macht prinzipiell das gleiche, wie pushState() mit dem Unterschied, dass bei replaceState() die History nicht erweitert, sondern quasi überschrieben wird.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!