Jak sprawdzić # skrót w adresie URL za pomocą JavaScript?

783

Mam trochę kodu jQuery / JavaScript, który chcę uruchomić tylko wtedy, gdy #w adresie URL znajduje się link kotwiczący hash ( ). Jak sprawdzić tę postać za pomocą JavaScript? Potrzebuję prostego testu typu catch-all, który wykryłby takie adresy URL:

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

Zasadniczo coś w stylu:

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

Byłbym bardzo wdzięczny, gdyby ktokolwiek mógł skierować mnie w dobrym kierunku.

Philip Morton
źródło

Odpowiedzi:

1404

Prosty:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
Gareth
źródło
42
Dodatkowo: obiekt .location jest dostępny tylko pod adresem URL bieżącego okna, nie można tego zrobić w przypadku dowolnego adresu URL (np. Zapisanego w zmiennej typu string)
Gareth,
64
Ponadto właściwości lokalizacji, takie jak .hash i .query, są również dostępne w elementach <a>
Gareth
19
.searchjest dostępny na <a>, nie .query. JQuery próbki: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]. .hash => "#fragmenttest"i .search= ?qs=1. Stamtąd kliknij pytanie ekstrakcyjne, aby uzyskać coś innego niż ciąg.
patridge
1
@hitautodestruct: to pytanie nie dotyczy zmian skrótu, tylko tego, czy jest on obecny podczas ładowania strony, czy nie.
Gareth
2
@Gareth Tak, masz rację. Właśnie zdałem sobie sprawę, że link, który zamieściłem, dotyczy hashchangewydarzenia, a nie window.location.hash. Chociaż ten ostatni nie jest obsługiwany przez IE <8.
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
źródło
54

Umieść następujące informacje:

<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
źródło
1
Dzięki, window.location.hash ma wartość tylko wtedy, gdy występuje wartość po #. na przykład. //www.example.com# zwraca „” podczas sprawdzania skrótu.
Jessy
33

Jeśli identyfikator URI nie jest lokalizacją dokumentu, ten fragment kodu zrobi to, co chcesz.

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

if (hash) {
    alert(hash)
} else {
    // do something else
}
Marc Diethelm
źródło
+1 dla Javascript, który nie wie, co jest poza granicami :)
Dunc
2
@Dunc: Cóż, tablice JS są w zasadzie obiektami. Dostępu do nich przez indeks jest jak dostęp do właściwości obiektu w taki sposób: obj['0']. W JS jest to prawdą: arr[0] === arr['0']dlatego jeśli indeks / klucz nie istnieje, zwrócona wartość jest niezdefiniowana zamiast poza granicami. jsfiddle.net/web5me/Mw376
Marc Diethelm
21

Próbowałeś tego?

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

( urlOczywiście gdzie jest adres URL, który chcesz sprawdzić).

Jon Skeet
źródło
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!
});

To rozwiąże problem;)

Ustne ÜNAL
źródło
Podobała mi się ta odpowiedź, ponieważ mieszanie JS + JQ, przeglądarka i proste rozwiązanie, już zaimplementowało to podejście.
Arthur Kushman,
13
window.location.hash 

zwróci identyfikator skrótu

użytkownik2327502
źródło
Krótki i czysty, jest idealny
Jam
10

... lub istnieje selektor jquery:

$('a[href^="#"]')
BaronVonKaneHoffen
źródło
6

Oto, co możesz zrobić, aby okresowo sprawdzać zmianę wartości skrótu, a następnie wywołać funkcję w celu przetworzenia wartości skrótu.

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
źródło
11
to jest konieczne tylko w 6 + 7. Wszystkie inne przeglądarki zawierały zdarzenie
onhashchange
@Tokimon - świetnie! Nie wiedziałem tego Ale myślę, że nadal musimy wspierać te stare wersje IE
Emmanuel
1
Tak niestety ... Nawet IE 8 przyzwyczajenie odejść szybko jak IE 9 nie jest obsługiwany na XP :(
Tokimon
1
modernizr.com implementuje zdarzenie hashchange w starszych przeglądarkach (wraz z kilkoma innymi nowoczesnymi funkcjami)
guigouz 27.11.11
4
To nie jest zalecany kod w ogóle: powinien być co najmniej: setTimeout(checkHash, 400). Ponadto nowoczesne przeglądarki mają hashchangewydarzenie, dzięki czemu możesz to zrobić window.addEventListener('hashchange', function(){ … }). Wreszcie, wyciekanie hashzmiennej globalnej jest kolejną niezalecaną praktyką, nawet dla przykładu.
Oncle Tom,
5

Większość osób zna właściwości adresu URL w document.location. To świetnie, jeśli interesuje Cię tylko bieżąca strona. Pytanie dotyczyło jednak możliwości analizowania kotwic na stronie, a nie samej strony.

Większość osób zdaje się tęsknić za tym, że te same właściwości adresów URL są również dostępne dla elementów zakotwiczenia:

// 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
źródło
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; 
  }
}
użytkownik2465270
źródło
3
Czy nie powinno to być „hash.length” w przeciwieństwie do „hash.length ()”? :)
Nathan Pitman,
4
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
Graham
źródło
3

Komentarze kuropatwy i Garetha powyżej są świetne. Zasługują na osobną odpowiedź. Najwyraźniej właściwości mieszania i wyszukiwania są dostępne w każdym obiekcie linku HTML:

<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>

Lub

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

Jeśli potrzebujesz tego na zwykłej zmiennej łańcuchowej i akurat masz jQuery, powinno to działać:

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

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

(ale to może trochę przesadzone ..)

pospolity
źródło
3

Rzucając to tutaj jako metodę wyodrębnienia właściwości lokalizacji z dowolnych ciągów podobnych do URI. Chociaż window.location instanceof Locationjest to prawdą, każda próba wywołania Locationpowie ci, że jest to nielegalny konstruktor. Nadal można dostać się do takich rzeczy jak hash, query, protocolitp ustawiając swój ciąg jako hrefwłasność elementu DOM kotwica, która będzie następnie udostępnić wszystkie właściwości z adresu window.location.

Najprostszym sposobem na to jest:

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

string.hash;

Dla wygody napisałem małą bibliotekę, która wykorzystuje to do zamiany natywnego Locationkonstruktora na taki, który pobiera ciągi znaków i tworzy window.locationobiekty podobne do: Location.js

Barney
źródło
1

Zwykle kliknięcia zaczynają się od zmian lokalizacji, więc po kliknięciu dobrym pomysłem jest ustawienieTimeOut, aby zaktualizować window.location.hash

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

lub możesz słuchać lokalizacji za pomocą:

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

Napisałem wtyczkę jQuery, która robi coś takiego, jak chcesz.

To prosty router z kotwicą.

Rolando
źródło
1

Oto prosta funkcja, która zwraca truelub false(ma / nie ma hashtaga):

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
}

Zwraca truew tym przypadku.

Na podstawie komentarza @ jon-skeet.

dnns
źródło
0

Jest to prosty sposób przetestowania tego dla bieżącego adresu URL strony:

  function checkHash(){
      return (location.hash ? true : false);
  }
aabiro
źródło
-2

czasami pojawia się pełny ciąg zapytania, taki jak „#anchorlink? firstname = mark”

to jest mój skrypt, aby uzyskać wartość skrótu:

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

returns -> #anchorlink
markg
źródło
6
Nie jest to możliwe, ponieważ skrót jest dołączany po ciągu zapytania i nigdy nie jest wysyłany do serwera. Jedynym skrótem czasowym pojawiającym się przed ciągiem zapytania jest ręczna modyfikacja adresu URL.
1
tak, ale czasami ludzie wysyłają adresy URL w tym formacie. jest to tylko po to, aby uzyskać tylko wartość skrótu i ​​zaniedbać pozostałe. :)
markg