Wie können Sie mit JavaScript in einer URL nach einem #hash suchen?

783

Ich habe einen jQuery / JavaScript-Code, den ich nur ausführen möchte, wenn #eine URL einen Hash ( ) - Ankerlink enthält. Wie können Sie mit JavaScript nach diesem Zeichen suchen? Ich benötige einen einfachen Sammeltest, der URLs wie diese erkennt:

  • example.com/page.html#anchor
  • example.com/page.html#anotheranchor

Grundsätzlich etwas in der Art von:

if (thereIsAHashInTheUrl) {        
    do this;
} else {
    do this;
}

Wenn mich jemand in die richtige Richtung weisen könnte, wäre das sehr dankbar.

Philip Morton
quelle

Antworten:

1405

Einfach:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
Gareth
quelle
42
Zusätzlich: Das .location-Objekt ist nur unter der URL des aktuellen Fensters verfügbar. Sie können dies nicht für eine beliebige URL tun (z. B. eine, die in einer Zeichenfolgenvariablen gespeichert ist)
Gareth,
64
Auch Standorteigenschaften wie .hash und .query sind auch für <a> Elemente verfügbar
Gareth
19
.searchist auf einem <a>nicht verfügbar .query. Beispiel jQuery : $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]. .hash => "#fragmenttest"und .search= ?qs=1. Drücken Sie von dort aus die Frage nach der Querystring-Extraktion , um etwas anderes als eine Zeichenfolge zu erhalten.
Patridge
1
@hitautodestruct: Bei dieser Frage geht es nicht um Änderungen am Hash, sondern nur darum, ob beim Laden der Seite eine vorhanden ist oder nicht.
Gareth
2
@ Gareth Ja, du hast recht. Ich habe gerade festgestellt, dass der Link, den ich gepostet habe, für die hashchangeVeranstaltung war und nicht window.location.hash. Obwohl letzteres von IE <8 nicht unterstützt wird.
hitautodestruct
334
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }
Mark Notton
quelle
54

Geben Sie Folgendes ein:

<script type="text/javascript">
    if (location.href.indexOf("#") != -1) {
        // Your code in here accessing the string like this
        // location.href.substr(location.href.indexOf("#"))
    }
</script>
José Leal
quelle
1
Vielen Dank, window.location.hash hat nur dann einen Wert, wenn nach dem # ein Wert steht. zum Beispiel. //www.example.com# gibt '' zurück, wenn der Hash überprüft wird.
Jessy
33

Wenn der URI nicht der Speicherort des Dokuments ist, macht dieses Snippet, was Sie wollen.

var url = 'example.com/page.html#anchor',
    hash = url.split('#')[1];

if (hash) {
    alert(hash)
} else {
    // do something else
}
Marc Diethelm
quelle
+1 für Javascript nicht wissen, was außerhalb der Grenzen ist :)
Dunc
2
@Dunc: Nun, JS-Arrays sind im Grunde genommen Objekte. Der Zugriff über den Index erfolgt wie der Zugriff auf eine Object-Eigenschaft wie folgt : obj['0']. In JS ist dies wahr: arr[0] === arr['0']Wenn der Index / Schlüssel nicht vorhanden ist, ist der zurückgegebene Wert nicht definiert, sondern außerhalb der Grenzen. jsfiddle.net/web5me/Mw376
Marc Diethelm
21

Hast du das versucht?

if (url.indexOf('#') !== -1) {
    // Url contains a #
}

(Wo urlist natürlich die URL, die Sie überprüfen möchten?)

Jon Skeet
quelle
17
$('#myanchor').click(function(){
    window.location.hash = "myanchor"; //set hash
    return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
    //do sth here, hell yeah!
});

Dies wird das Problem lösen;)

Oral ÜNAL
quelle
Diese Antwort gefiel mir, da das Mischen von JS + JQ, Cross-Browser und einfacher Lösung diesen Ansatz bereits implementiert hat.
Arthur Kushman
13
window.location.hash 

gibt die Hash-ID zurück

user2327502
quelle
Kurz und sauber, ist perfekt
Jam
10

... oder es gibt einen JQuery-Selektor:

$('a[href^="#"]')
BaronVonKaneHoffen
quelle
6

Hier ist, was Sie tun können, um regelmäßig nach einer Änderung des Hash zu suchen und dann eine Funktion aufzurufen, um den Hash-Wert zu verarbeiten.

var hash = false; 
checkHash();

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    alert(hash);
}
Emmanuel
quelle
11
das ist nur in dh 6 + 7 notwendig. Alle anderen Browser haben das onhashchange-Ereignis eingeschlossen
Tokimon
@Tokimon - großartig! Das wusste ich nicht. Aber ich denke, wir müssen diese alten Versionen von IE
Emmanuel
1
Ja, leider ... Sogar IE 8 wird nicht
verschwinden,
1
modernizr.com implementiert das Hashchange-Ereignis in älteren Browsern (zusammen mit einer Reihe anderer moderner Funktionen)
Guigouz
4
Dies ist überhaupt kein empfohlener Code: Es sollte mindestens sein : setTimeout(checkHash, 400). Außerdem haben moderne Browser das hashchangeEreignis, so dass Sie eine durchführen können window.addEventListener('hashchange', function(){ … }). Schließlich ist das Auslaufen der globalen hashVariablen eine weitere nicht empfohlene Vorgehensweise, selbst zum Beispiel.
Onkel Tom
5

Die meisten Benutzer kennen die URL-Eigenschaften in document.location. Das ist toll, wenn Sie nur an der aktuellen Seite interessiert sind. Die Frage war jedoch, ob Anker auf einer Seite analysiert werden können, nicht auf der Seite selbst.

Was die meisten Leute zu vermissen scheinen, ist, dass dieselben URL-Eigenschaften auch zum Verankern von Elementen verfügbar sind:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});
Nicholas Davison
quelle
5
function getHash() {
  if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    if (hash.length === 0) { 
      return false;
    } else { 
      return hash; 
    }
  } else { 
    return false; 
  }
}
user2465270
quelle
3
Sollte das nicht "hash.length" im Gegensatz zu "hash.length ()" sein? :)
Nathan Pitman
4
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
Graham
quelle
3

Partridge und Gareths Kommentare oben sind großartig. Sie verdienen eine gesonderte Antwort. Anscheinend sind Hash- und Sucheigenschaften für jedes HTML-Link-Objekt verfügbar:

<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
   alert(document.getElementById('test').search); //bar
   alert(document.getElementById('test').hash); //quz
</script>

Oder

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

Wenn Sie dies für eine reguläre Zeichenfolgenvariable benötigen und zufällig jQuery haben, sollte dies funktionieren:

var mylink = "foo.html?bar#quz";

if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
    // do stuff
}

(aber es ist vielleicht etwas übertrieben ..)

Commonpike
quelle
3

Wirf dies hier als Methode zum Abstrahieren von Positionseigenschaften von beliebigen URI-ähnlichen Zeichenfolgen ein. Obwohl dies window.location instanceof Locationzutrifft, werden Sie bei jedem Aufruf des LocationAufrufs darauf hingewiesen, dass es sich um einen illegalen Konstruktor handelt. Sie können die Dinge noch wie hash, query, protocolusw. von Ihrem String als Einstellung hrefEigenschaft eines DOM Ankerelement, das dann alle der Adressen Eigenschaften teilen window.location.

Der einfachste Weg, dies zu tun, ist:

var a = document.createElement('a');
a.href = string;

string.hash;

Der Einfachheit halber habe ich eine kleine Bibliothek geschrieben, die dies verwendet, um den nativen LocationKonstruktor durch einen zu ersetzen, der Zeichenfolgen window.locationakzeptiert und ähnliche Objekte erzeugt: Location.js

Barney
quelle
1

Normalerweise stehen Klicks an erster Stelle, wenn sich der Standort ändert. Nach einem Klick ist es daher eine gute Idee, setTimeOut festzulegen, um die Datei window.location.hash zu aktualisieren

$(".nav").click(function(){
    setTimeout(function(){
        updatedHash = location.hash
    },100);
});

oder Sie können den Ort anhören mit:

window.onhashchange = function(evt){
   updatedHash = "#" + evt.newURL.split("#")[1]
};

Ich habe ein jQuery-Plugin geschrieben , das so etwas wie das macht, was Sie tun möchten.

Es ist ein einfacher Ankerfräser.

Rolando
quelle
1

Hier ist eine einfache Funktion, die zurückgibt trueoder false(hat / hat kein Hashtag):

var urlToCheck = 'http://www.domain.com/#hashtag';

function hasHashtag(url) {
    return (url.indexOf("#") != -1) ? true : false;
}

// Condition
if(hasHashtag(urlToCheck)) {
    // Do something if has
}
else {
    // Do something if doesn't
}

Gibt truein diesem Fall zurück.

Basierend auf dem Kommentar von @ jon-skeet.

dnns
quelle
0

Dies ist eine einfache Möglichkeit, dies für die aktuelle Seiten-URL zu testen:

  function checkHash(){
      return (location.hash ? true : false);
  }
aabiro
quelle
-2

Manchmal erhalten Sie die vollständige Abfragezeichenfolge wie "#anchorlink? firstname = mark".

Dies ist mein Skript, um den Hash-Wert zu erhalten:

var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);

returns -> #anchorlink
markg
quelle
6
Nicht möglich, da der Hash nach der Abfragezeichenfolge angehängt und niemals an den Server gesendet wird. Der einzige Hash, der vor der Abfragezeichenfolge angezeigt wird, ist, wenn Sie die URL von Hand geändert haben.
1
Ja, aber manchmal senden Leute URLs in diesem Format. Dies ist nur so, dass Sie nur den Hash-Wert erhalten und die anderen vernachlässigen können. :)
Markg