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

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.

Prosty:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

  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
  }

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>

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
}

Próbowałeś tego?

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

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

$('#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;)

window.location.hash 

zwróci identyfikator skrótu

... lub istnieje selektor jquery:

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

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);
}

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
   }
});

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

var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);

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

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

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

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.

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

  function checkHash(){
      return (location.hash ? true : false);
  }

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