HTML5 mit History.js für Idioten?
0 0 1 
molily
HTML5 mit History.js für Idioten?
Hallo!
Ich möchte gern einen Player in eine Homepage einbinden, der beim Seitenwechsel nicht neu lädt, damit die Musik nicht aufhört zu spielen (keine Angst, ohne AutoPlay). Ich weiß, dass die Frage oft auftaucht, doch gibt es noch keine Antwort auf meine Problemchen.
Nun könnte ich meine gesamte Seite in ein iframe packen und den Player auf die index.html. Klappt eigentlich ganz gut (SEOs sind mir da mal egal, bzw. die sind ja auch noch optimierbar), dummerweise verträgt sich die FancyBox, die unbedingt rein muss, damit nicht (ein hässlicher, leerer, vertikaler Scrollbalken entsteht dann am iframe, trotz 'overflow-x:hidden').
Nun bin ich nach viel gegoogle auf die HTML5-Funktion für die Manipulation der History gestoßen. Ich habe mir auch Beispiele angeguckt, scheine aber zu blöd zu sein - alle Beispiele gehen auch von JS-Kenntnissen aus, die mir fehlen.
Die History.js scheint mir die vernünftigste Variante zu sein, so wie das alles in den Beschreibungen klingt (mit Not-Funktion für HTML4):
https://github.com/balupton/History.js/
Hat die schonmal jemand benutzt/kann mir jemand auf Anhieb verraten, was in mein HTML-Dokument kommt? Code ist ganz einfach:
<body>
<!-- Neu laden bei Seitenwechsel-->
<div id="inhalt">
INHALT
</div>
<ul id="navi">
<li><a href="seite1">Seite1</li>
<li><a href="seite2">Seite2</li>
<li><a href="seite3">Seite3</li>
<li><a href="seite4">Seite4</li>
usw
</ul>
<!-- Nicht neu laden -->
<div class="player">
PLAYER HIER
</div>
</body>
Das Menü möchte ich gern mitladen, damit ich die Struktur beibehalten kann, die die Buttons bei der jeweils angezeigten Seite anpasst.
Diese History-Manipulation klingt nach einer extrem paraktischen Sache (wenn man sie gut einsetzt - mit benutzbarem Zurück-button etc.)
Ich versuche seit Tagen, das zu lösen, aber ich steige einfach nicht dahinter, wie man das auf meine Struktur übertragen könnte.
Weiß jemand Rat? Oder gibt es eine Möglichkeit, den Scrollbalken zu unterbinden, den die Fancybox auftauchen lässt? Derjenige wäre Lebensretter - nicht meines Lebens, aber desjenigen meiner Partnerin, die mich seit Tagen auf den Bildschirm schauen und fluchen sieht :D
Viele Grüße,
Oscar
-
PS: Es geht natürlich nur um die Navigation innerhalb meiner Seite, an fremden Inhalten habe ich kein Interesse.
-
Gehst du da nicht einen zu komplizierten Weg?
Ich würde die Musik so einbinden dass ein separater Player geöffnet wird. Dann hast du genau den Effekt den du haben willst, der Besucher kann den Player schließen wann er will und du verunstaltest und verkomplizierst deine Seite nicht.-
Gehst du da nicht einen zu komplizierten Weg?
Ich würde die Musik so einbinden dass ein separater Player geöffnet wird. Dann hast du genau den Effekt den du haben willst, der Besucher kann den Player schließen wann er will und du verunstaltest und verkomplizierst deine Seite nicht.Ein Popup wäre meine letzte Option, da ich eben das als 'Verunstalten' bezeichnen würde, aus Endnutzer-Sicht.
Ein Bisschen Script im Code stört doch niemanden, und eine Seite mit eingebautem Player sieht modern aus und navigiert sich völlig unkomplizert (keine Suche nach dem dudelnden Fenster).Das mit dem iframe habe ich übrigens gelöst (war ein margin-Bug der FancyBox 2), habe aber immer noch Interesse an der History-Lösung!
Auch allgemein fehlt da einfach ein Anfänger-Tutorial - wieviel Traffic HTML5 so einsparen könnte, wenn diese Funktionen anständig promotet würden...
-
-
Hallo,
mit History.js kannst du erst einmal nur die angezeigte URL ändern und Einträge in der Browser-History erzeugen.
Wie du das grundsätzlich nutzt, steht ja in der README:
https://github.com/balupton/History.js/#usageEinfachste Nutzungsart:
History.pushState(null, null, "irgendeineURL");Das löst aber nur ein Teilproblem, was du vorhast, ist viel mehr. Du müsstest alle Klicks auf Links abfangen, die zugehörige URL im Hintergrund laden, das HTML extrahieren und ins aktuelle Dokument einfügen. Beim statechange-Event (wenn der Back-Button verwendet wird) müsstest du dasselbe mit der neuen URL tun. Was du vorhast, erinnert mehr an pjax und Turbolinks.
So einfach wird das also nicht. Sowohl das HTML, das CSS als auch JavaScripte müssen angepasst werden, damit das Laden und Einfügen über Ajax möglich ist. Und die oben beschrieben JavaScript-Logik musst du dir wahrscheinlich selbst schreiben. Single-Page-Applications in JavaScript besitzen meist schon eine solche Logik, z.B. Frameworks, die auf Backbone.js aufsetzen. Ich weiß aber nicht, ob das in deinem Fall den Aufwand wert ist.
Mathias