Wie URL ohne Refresh neu schreiben, wie GitHub.com

Ich war auf GitHub.com und ich bemerkte, wenn Sie die Quelle für ein Repository suchen, und klicken Sie auf eine Datei, der Quellcode einschiebt und die URL ändert sich, aber es scheint nicht, als ob die Seite aktualisiert wurde. Weiß jemand wie das gemacht wird? Ich habe das mit dem Zeichen # gesehen, besonders beim Erstellen von Flash-Sites, aber ich habe es noch nie so gemacht, wie es GitHub macht, ohne das #.Wie URL ohne Refresh neu schreiben, wie GitHub.com

Hier ist ein Beispiel: https://github.com/jquery/jquery

Klicken Sie auf eine der Textdateien wie .gitattributes dann in der Brotkrümel auf jQuery klicken, um zu sehen, was ich meine.

Quelle

2010-12-06 Sandro

Es navigiert zu einer neuen Seite hier ... – cdhowie

Wenn Sie ein wenig mehr Forschung betreiben, sieht es so aus, als ob es sich um ein Webkit/Safari-Feature handelt. – Sandro

In einigen Browsern ist das Seiten-Repaint ein wenig weniger abrupt, so dass es glatter aussieht, aber ich denke, es lädt eine neue Seite. – bmb

XMLHttpRequest wird auf der Clientseite in Chrome/Webkit-Browsern verwendet, um serverseitige Ressourcen ohne Seitenaktualisierung abzurufen, und Inhalt wird dynamisch geladen und Animationen können während des Anhängens von Inhalt eingebunden werden.

Ich bin mir nicht sicher, warum genau Chrome vom Ajax angesprochen wird, da sich die Hash-Markierung normalerweise ändert, wenn Ajax auf die gleiche Weise angewendet wird (wie Twitter).

~~Für die URL dynamisch ändern, glaube ich, dass alles, was getan wird location.href ist aktualisiert.~~ Auf den zweiten Gedanken könnte es eine neue HTML5-Funktion sein, die nur Chrome unterstützt.

Quelle

2010-12-06 22:49:41

Der AJAX-Teil war nicht wirklich das, woran ich interessiert war. Ich bin mehr daran interessiert, wie sich die URL ändert, ohne die Seite zu aktualisieren. – Sandro

'location.href'? –

Ich denke, es könnte damit zu tun haben: https://developer.mozilla.org/de/DOM/Manipulating_the_browser_history – Sandro

Github verwendet window.history.replaceState()

Here Sie können sehen, wie sie es tun

Quelle

2010-12-06 23:01:27 nunopolonia

Ehrfürchtig, das war nur ein Traum von mir, als ich anfing, dies zu tun und aus Sicherheitsgründen musste man stattdessen den Hash-Trick verwenden. – Xeoncross

ich diesen Artikel gefunden, die diese HTML5-Funktionen erklärt - window.history.pushState(), window.history .replaceState() und das onpopstate() Ereignis: http://www.spoiledmilk.dk/blog/?p=1922

Wie der Artikel erwähnt, verwendet Flickr diese Technik auch an mehreren Stellen.

Quelle

2010-12-07 03:32:57 Harish

Die Verbindung ist tot. Kannst du zufällig eine andere, ähnliche Quelle finden? –

Wie URL ohne Refresh neu schreiben, wie GitHub.com

Antwort

Verwandte Themen