2012-12-18 16 views
18

SoundCloud ist eine erstaunliche Website, die HTML5 und Backbone.js verwendet. Die einzige Sache ist, ich kann nicht finden, welche Technologie sie benutzen, die die Musik erlaubt, weiter zu spielen, selbst wenn man Seiten wechselt.Fortsetzung der Musikwiedergabe auch beim Seitenwechsel

Mit welcher Technologie wird der Audiostream wiedergegeben?

+0

Ich nehme an, dass es sich um eine "Single-Page-App" handelt, was bedeutet, dass Sie nie einen vollständigen Seiten-Reload auslösen. –

+0

aber die URL chenged – rayking

+0

sie verwenden pushState –

Antwort

21

Tatsache ist, dass Sie keine neue Seite laden, aber der Inhalt wird über AJAX geladen.

Die Seite verwendet dann die HTML5-Verlaufs-API, um die Möglichkeit zum Navigieren mithilfe der Vor- und Zurück-Schaltflächen des Browsers hinzuzufügen.

ich in dieses Thema begann durch das Lesen und die folgenden zwei Ressourcen auszuprobieren:

http://diveintohtml5.info/history.html
http://html5demos.com/history


Die einfachste Möglichkeit, die aktuellen Inhalte über AJAX zu laden und ersetzen und dann call

history.pushState(null, null, link.href); 

Um den Verlaufseintrag des Curren hinzuzufügen tly angezeigte Seite.

Wenn Sie nun die Zurück-Taste drücken, lädt der Browser die vorherige Seite nicht, sondern löst das Ereignis popState aus. Dies kann verwendet werden, um die vorherige Seite mithilfe von AJAX oder Informationen in Ihren JavaScript-Variablen wiederherzustellen.

window.addEventListener("popstate", function(e) { 
    //loadPreviousPage(); 
} 
Verwandte Themen