Wie ändert man dynamisch die HTML-Quelle einer Seite?

Bis jetzt glaubte ich, dass die HTML-Quelle einer Seite nicht geändert werden konnte, ohne sie komplett neu zu laden. Ich vermute, dass das, was ich gerade gesehen habe, irgendwie mit pushState zusammenhängt (aber nicht nur das): Auf der Quartz-Website (qz.com) gleitest du nahtlos zum nächsten Artikel, sobald du das Ende des einen erreicht hast Lesen, mit einem sauberen Update der URL und, erstaunlicherweise, einer aktualisierten HTML-Quelle.Wie ändert man dynamisch die HTML-Quelle einer Seite?

Ein Beispiel blättern jeden Artikel unten, z.B .: http://qz.com/643497/we-are-witnessing-the-rise-of-global-authoritarianism-on-a-chilling-scale/

Vielleicht etwas verpasst ich habe, aber könnte jemand erklären, wie dies geschehen ist? Welche HTML5-APIs werden hier verwendet?

HINWEIS: Meine Frage konzentriert sich speziell auf die Aktualisierung der HTML-Inhalte, die Sie sehen können, wenn die Seite Quelle anzeigt (nicht der Inspektor DOM, natürlich).

Quelle

2016-03-21 Nicolas Le Thierry d' Ennequin

Sieht für mich, sie verwenden Backbone, um es zu einer einzigen Seite Anwendung. – httpNick

@httpNick Ich kann nicht sehen, Backbone in den Quellen in den Dev-Tools –

die Tatsache, welche Bibliothek verwendet wird, spielt keine Rolle. Dies kann in Vanilla Js einfach mit XHR und PushState getan werden, und ich denke, wir sollten dies nicht über eine bestimmte Bibliothek machen. –

Das sieht Ihrer typischen asynchronen Inhaltsladung sehr ähnlich, aber ja, sie verwenden pushState, um die URL zu ändern. Was dich antreibt, denke ich ist die Tatsache, dass die Routen gut durchdacht sind, so dass dir der gleiche Artikel als erstes zur Verfügung steht. Hinter den Kulissen ist dies jedoch nur eine Reihe von JSONP-Anfragen, die mit pushState() kombiniert werden, um ein gut fließendes, wohlgeformtes Dokument zu erhalten. Sie können die Anfragen sogar über die Netzwerkregisterkarte einer modernen Debugging-Konsole überprüfen.

Sehen Sie diese Antwort für Informationen zur Verwendung von pushstate für url Aktualisierung: Modify the URL without reloading the page

EDIT

Da Sie auf der Tatsache auf stecken immer, wie die Quelle ändert, darüber nachdenken, es so: Wenn ich sage, "Die Routen sind gut durchdacht, so dass Sie mit dem gleichen URL zuerst den gleichen Artikel erhalten." Ich meine, dass der Verweis auf diese Seite diesen Artikel widerspiegelt. Alles, was Sie tun, indem Sie die Quelle anzeigen, ist die aktive URL (geändert durch pushState, so dass Sie wirklich zu einer anderen Seite gehen, um die Quelle abzurufen) und den Text ohne DOM-Parsing/-Rendering. Ich hoffe, das verdeutlicht, was gerade auf dieser Seite passiert.

Quelle

2016-03-21 21:53:26

Bleiben Sie stecken? Nun, nein, ich habe nur eine Frage gestellt. –

Entschuldigung. Ich machte keine Annahmen oder versuchte herablassend zu sein. Wo ich herkomme, bedeutet mehr, etwas nicht vollständig zu verstehen. z.B. festhalten, wie Inline-Caching funktioniert oder wie ein Magier einen Hasen aus dem Hut zieht. –

Sie können dies jetzt in den meisten "modernen" Browsern tun!

Hier ist der Originalartikel, den ich gelesen habe (veröffentlicht am 10. Juli 2010): (HTML5: Changing the browser-URL without refreshing page).

Weitere Informationen zu pushState/replaceState/popstate (auch HTML5-Verlaufs-API genannt) finden Sie in den MDN-Dokumenten.

Sie können dies tun:

window.history.pushState ("Objekt oder String", "Titel", "/ new-url");

Quelle

2016-03-21 21:58:53 Thomas

Ja, pushState hat ein Statusargument (das erste), mit dem Sie den Status speichern können.Aber dies ist ein einfaches JS-Objekt, nicht etwas, das du magisch in die Seitenquelle einfügen kannst, meines Wissens! –

Wie ändert man dynamisch die HTML-Quelle einer Seite?

Antwort

Verwandte Themen