it-swarm.com.de

Wie kann mit JavaScript nach einem #hash in einer URL gesucht werden?

Ich habe etwas jQuery-JavaScript-Code, den ich nur ausführen möchte, wenn in einer URL ein Hash-Ankerzeichen (#) vorhanden ist. Wie können Sie mithilfe von JavaScript nach diesem Zeichen suchen? Ich brauche einen einfachen Catch-All-Test, der URLs wie diese erkennt:

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

Grundsätzlich etwas im Sinne von:

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

Wenn mich jemand in die richtige Richtung weisen könnte, wäre das sehr zu begrüßen.

710
Philip Morton

Einfach:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
1271
Gareth
  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
  }
288
Mark Notton

Setze 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>
48
José Leal

Wenn der URI nicht der Ort des Dokuments ist, wird dieses Snippet das tun, was Sie möchten.

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

if (hash) {
    alert(hash)
} else {
    // do something else
}
27
Marc Diethelm

Hast du das probiert?

if (url.indexOf("#") != -1)
{
}

(Wobei url natürlich die zu überprüfende URL ist.)

18
Jon Skeet
$('#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 löst das Problem;)

15
Oral ÜNAL
window.location.hash 

gibt den Hash-Bezeichner zurück

12
user2327502

... oder es gibt eine Jquery-Auswahl:

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

So können Sie regelmäßig nach einer Änderung des Hashs suchen und dann eine Funktion aufrufen, um den Hashwert 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);
}
6
Emmanuel

Die meisten Leute kennen die URL-Eigenschaften in document.location. Das ist großartig, wenn Sie nur an der aktuellen Seite interessiert sind. Aber es ging darum, Anker auf einer Seite und nicht auf der Seite selbst zu analysieren.

Die meisten Leute scheinen zu übersehen, dass dieselben URL-Eigenschaften auch für Ankerelemente 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
   }
});
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; 
  }
}
4
user2465270
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
3
Graham

Dies hier als Methode zum Abstrahieren von Ortseigenschaften von beliebigen URI-ähnlichen Strings zu verwenden. Obwohl window.location instanceof Location wahr ist, werden Sie bei jedem Versuch, Location aufzurufen, darüber informiert, dass es sich um einen illegalen Konstruktor handelt. Sie können immer noch auf Dinge wie hash, query, protocol usw. zugreifen, indem Sie Ihre Zeichenfolge als href-Eigenschaft eines DOM-Ankerelements festlegen, die dann alle Adresseneigenschaften mit window.location teilt.

Am einfachsten ist dies:

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

string.hash;

Der Einfachheit halber habe ich eine kleine Bibliothek geschrieben, in der der native Location-Konstruktor durch einen solchen ersetzt wird, der Strings benötigt und window.location- ähnliche Objekte erzeugt: Location.js

3
Barney

Partridge und Gareths Kommentare sind großartig. Sie verdienen eine gesonderte Antwort. Anscheinend sind Hash- und Such-Eigenschaften 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 String-Variable benötigen und jQuery in der Nähe ist, sollte dies funktionieren.

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

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

(aber es ist vielleicht ein bisschen übertrieben ..)

3
commonpike

Normalerweise werden Klicks zuerst als Standortänderungen angezeigt Nach einem Klick empfiehlt es sich, setTimeOut aufzurufen, um die aktualisierte window.location.hash zu erhalten

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

oder Sie können sich den Standort anhören mit:

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

Ich habe ein jQuery-Plugin geschrieben das so etwas wie .__ tut, was Sie machen wollen.

Es ist ein einfacher Ankerrouter.

1
Rolando

Hier ist eine einfache Funktion, die true oder false zurückgibt (hat/hat keinen 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 in diesem Fall true zurück.

Basierend auf dem Kommentar von @ jon-skeet.

0
dnns

Dies ist eine einfache Methode, um dies für die aktuelle Seiten-URL zu testen:

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