Verwenden von Hash -URLs mit JQuery -Beispiel

Viele moderne Web -Apps verwenden heutzutage Hash -URLs Um eine Seite zu verleihen (wie ein Seiten -Tag, Abschnitt, Aktion usw.), ohne sie zu aktualisieren, kann es identifizieren. Dies folgt von der Erlangung von URL -Parametern mit JQuery, um dynamische Daten durch die URL an die Seite zu übergeben. Das ist immer noch weit verbreitet auf dem www.

window.location.hash vs document.url

Schauen wir uns einen kurzen Blick auf beide und unten finden Sie eine Regex, mit der Sie das Hash -Tag schnappen können.

<span>//using window.location.hash
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return window.location.hash.replace('#','');
</span><span>};
</span>$<span>.urlHash();</span>

Wichtig: Ort.Hash ist nicht sicher für den IE (einschließlich IE9). Auch wenn Ihre Seite einen IFrame enthält, erhalten Sie nach manuellem Aktualisieren im Inhalt von Iframe den alten Standort. HASH -Wert (für das Laden der ersten Seite), während der manuelle abgerufene Wert anders ist.

<span>//IE Proof - URL Hash Grab - returns complete hash value
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return document.URL.substr(document.URL.indexOf('#')+1);
</span><span>};
</span>$<span>.urlHash();</span>

Als Beispiel, um den Tag der Week -Hash -Tag zu extrahieren, würden Sie dies so tun:

<span>//in context - extract dayofweek hash
</span><span>//eg  url#dayofweek1 would return 1
</span><span>if (document.URL.indexOf('#dayofweek'))
</span><span>{
</span>    week <span>= parseInt(document.URL.substr(document.URL.indexOf('#')+1).replace('dayofweek',''))-1;
</span>    $resParent<span>.eq(week).showResources();
</span><span>}</span>

Ein weiterer anständiger Weg

Dies ist ein weiterer anständiger Weg, um einen schwereren Regex zu verwenden (das Pfundzeichen ist optional, da .Match () niemals null zurückgibt).

<span>var match = location.hash.match(<span>/<span>^#?(.*)$</span>/</span>)[1];
</span><span>if (match)
</span><span>{
</span>   <span>//do stuff...
</span><span>}</span>

fällt…

<span>var hash = location.hash.match(<span>/#<span>(w+)</span>/</span>)[1];</span>

Probleme: Rückgabe falsche Ergebnisse, wenn es im Hash einen nicht-latinischen oder nicht alphanumeren Charakter gibt. Zum Beispiel würde für das Hash #foo@o #bar $%HUH Hallo nur „Foo“ zurückgegeben. Wirft ein Typeerror, wenn der Standort leer ist, da .Match () null zurückgibt

<span>var hash = location.hash.split('#')[1];</span>

Mit dem gleichen Test -Hash würde es zumindest den Teil „Foo@o“ bekommen, was bedeutet, dass es nur fehlschlägt, wenn der Hash ein Pfundzeichen enthält. Wenn es keinen Hash gibt, wirft es keinen Fehler auf, obwohl es und definierte anstelle der leeren Zeichenfolge zurückgegeben wird.

Referenzmaterial

Holen Sie sich Ihren Hash - den kugelsicheren Weg

häufig gestellte Fragen (FAQs) zu Hash -URLs

Was ist eine Hash -URL und warum ist es wichtig? Diese Kennung wird verwendet, um auf einen bestimmten Abschnitt innerhalb einer Webseite zu verweisen. Hash -URLs sind wichtig, da sie Benutzern ermöglichen, direkt zu bestimmten Inhalten auf einer Seite zu navigieren, ohne die gesamte Seite durchzuführen. Dies ist besonders nützlich für lange Webseiten mit mehreren Abschnitten. Darüber hinaus können Hash -URLs verwendet werden, um den Status in einer einzelnen Webanwendung zu verwalten, in der sich der Hash ändert, um die aktuelle Ansicht widerzuspiegeln.

Wie kann ich eine Hash -URL erstellen? URL ist recht einfach. Alles, was Sie tun müssen, ist ein Hash (#) -Symbol anzuhängen, gefolgt von einer Kennung an Ihre URL. Wenn Sie beispielsweise eine Seite unter www.example.com haben und eine Hash -URL erstellen möchten, die auf einen Abschnitt mit dem Namen „Abschnitt 1“ verweist, wäre Ihre Hash -URL www.example.com#§ 1.

Wie kann ich JQuery verwenden, um Hash -URLs zu manipulieren? Mit der Eigenschaft "Hash" des "Ort" -Objekts können Sie den Hash -Teil der URL erhalten oder festlegen. Um den Hash auf "Abschnitt1" festzulegen, würden Sie den Ort verwenden. Um den aktuellen Hash zu erhalten, würden Sie var hash = location verwenden. Durch Ändern des Hash können Sie verschiedene Inhalte laden, ohne die Seite zu aktualisieren. Dies wird häufig in einzelnen Seitenanwendungen verwendet, um eine reibungslose Benutzererfahrung zu erstellen.

Wie kann ich Hash -Änderungen mit JQuery erkennen? Änderungen. Sie können dieses Ereignis verwenden, um Code auszuführen, wenn sich der Hash ändert. Zum Beispiel $ (Fenster) .on ('Hashchange', function () { / * Ihr Code hier * /}); Während Hash -URLs sehr nützlich sein können, gibt es einige Nachteile. Ein wesentlicher Nachteil ist, dass sie Probleme mit der Suchmaschinenoptimierung (SEO) verursachen können, da Suchmaschinen möglicherweise den mit dem Hash verbundenen Inhalt möglicherweise nicht indexieren. Darüber hinaus können Hash -URLs Probleme mit der Analyse verursachen, da sie nicht immer als separate Seitenansichten verfolgt werden.

Kann ich Hash -URLs mit Anker -Tags verwenden? Anker -Tags zum Erstellen von "Sprunglinks", mit denen Benutzer direkt zu bestimmten Abschnitten einer Seite navigieren können. Der Hash in der URL entspricht dem Attribut "ID" des Anker -Tags. Festlegen der Eigenschaft "Hash" des "Ort" -Objekts in eine leere Zeichenfolge. Zum Beispiel location.hash = ''; Dies wird häufig in einseitigen Anwendungen verwendet, in denen der Zustand der Anwendung im Hash gespeichert ist. Dadurch kann der Benutzer durch Verwendung der Back -Taste oder durch Lesezeichen der URL in denselben Zustand zurückkehren. Verwenden einer URL, um direkt zu einem bestimmten Inhalt innerhalb einer Seite zu navigieren. Hash -URLs sind dafür perfekt, da Sie direkt mit einem bestimmten Abschnitt einer Seite verlinken können. Um eine Hash -URL für Deep Links zu verwenden, fügen Sie einfach den Hash und den Kennung des Abschnitts an Ihre URL an.

Das obige ist der detaillierte Inhalt vonVerwenden von Hash -URLs mit JQuery -Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!