JavaScriptを使用してURLの#ハッシュを確認するにはどうすればよいですか?


783

#URLにハッシュ()アンカーリンクがある場合にのみ実行したいjQuery / JavaScriptコードがあります。JavaScriptを使用してこのキャラクターを確認するにはどうすればよいですか?次のようなURLを検出する簡単なキャッチオールテストが必要です。

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

基本的には次のようなものです:

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

誰かが私を正しい方向に向けることができれば、それは大歓迎です。

回答:


1406

シンプル:

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

42
追加:.locationオブジェクトは現在のウィンドウのURLでのみ使用できます。これは、任意のURL(たとえば、文字列変数に格納されているURL)では実行できません
Gareth

64
また、.hashや.queryなどのロケーションプロパティも<a>要素で利用できます
Gareth

19
.searchで提供されています<a>、ではありません.query。サンプルのjQuery: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0].hash => "#fragmenttest"および.search= ?qs=1。そこから、クエリ文字列抽出の質問を実行して、文字列以外のものを取得します。
パトリッジ

1
@hitautodestruct:この質問はハッシュの変更に関するものではなく、ページの読み込み時に存在するかどうかだけです。
Gareth 2013年

2
@Garethはい、そうです。私が投稿したリンクがhashchangeイベント用であり、ではないことに気づきましたwindow.location.hash。後者は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
  }

54

以下を入れてください:

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

1
ありがとう、window.location.hashは、#の後に値がある場合にのみ値を持ちます。例えば。//www.example.com#は、ハッシュをチェックするときに ''を返します。
ジェシー2017

33

URIがドキュメントの場所でない場合、このスニペットは必要な処理を実行します。

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

if (hash) {
    alert(hash)
} else {
    // do something else
}

アウトオブバウンズが何であるかを知らないJavascriptの+1 :)
Dunc

2
@Dunc:まあJS配列は基本的にオブジェクトです。インデックスでそれらにアクセスすることは、次のようにObjectプロパティにアクセスすることに似ていますobj['0']。JSではこれは真です。arr[0] === arr['0']したがって、インデックス/キーが存在しない場合、戻り値は範囲外ではなく未定義になります。jsfiddle.net/web5me/Mw376
Marc Diethelm 2014年

21

これを試しましたか?

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

url明らかに、確認したいURLはどこにあります。)


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

これで問題が解決します;)


JS + JQ、クロスブラウザ、シンプルなソリューションを混合するこの回答cozは、すでにこのアプローチを実装しています。
Arthur Kushman 2016



6

ハッシュの変更を定期的にチェックし、関数を呼び出してハッシュ値を処理する方法は次のとおりです。

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

11
つまり6 + 7アル他のブラウザでのみnessesaryのthatsはonhashchangeイベントが含まれている
Tokimon

@Tokimon-素晴らしい!知らなかった。しかし、私たちはまだそれらの古いバージョンのIEをサポートする必要があると思います
Emmanuel

1
ええ悲しいことに... IE 9がXPでサポートされていないため、IE 8もすぐには消えないでしょう:(
Tokimon

1
modernizr.comは、hashchangeイベントを古いブラウザーに実装します(他の多くの最新機能と共に)
guigouz

4
これは推奨されるコードではありませんsetTimeout(checkHash, 400)。少なくとも次のようにする必要があります。さらに、最新のブラウザがhashchangeイベントを持っているので、を実行できますwindow.addEventListener('hashchange', function(){ … })。最後に、グローバルhash変数のリークは、たとえ例であっても、推奨されないもう1つの方法です。
Oncle Tom

5

ほとんどの人は、document.locationのURLプロパティを知っています。あなたが現在のページだけに興味があるなら、それは素晴らしいです。しかし、問題は、ページ自体ではなくページのアンカーを解析できるかどうかについてでした。

ほとんどの人が見落としているように見えるのは、これらの同じURLプロパティが要素のアンカーにも使用できることです。

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

3
「hash.length()」ではなく「hash.length」ではないのですか?:)
Nathan Pitman

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

3

上記のパートリッジとガレスのコメントは素晴らしいです。彼らは別の答えに値する。どうやら、ハッシュと検索のプロパティは、どのHTML Linkオブジェクトでも利用できます。

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

または

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

通常の文字列変数でこれが必要で、偶然にjQueryがある場合、これは機能するはずです。

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

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

(しかし、多分少しやり過ぎです..)


3

これを、任意のURIのような文字列から場所のプロパティを抽象化するためのメソッドとしてここにスローします。これwindow.location instanceof Locationは本当ですが、起動しようとするLocationと、不正なコンストラクタであることがわかります。あなたはまだのようなものを得ることができhashqueryprotocolとしてあなたの文字列を設定することによって、などhref、その後に全てのアドレスのプロパティを共有するDOMアンカー要素のプロパティwindow.location

これを行う最も簡単な方法は次のとおりです。

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

string.hash;

便宜上、これを利用してネイティブLocationコンストラクターを文字列を取得し、のようwindow.locationなオブジェクトを生成するものに置き換える小さなライブラリーを作成しました:Location.js


1

通常、クリックは場所の変更より先に行われるため、クリック後にsetTimeOutを実行して更新されたwindow.location.hashを取得することをお勧めします。

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

または、次のコマンドで位置を聞くことができます:

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

私はあなたがやりたいことのようなことをするjQueryプラグインを書きました。

シンプルなアンカールーターです。


1

以下は、(trueまたはfalseハッシュタグを持っている/持っていない)を返す単純な関数です。

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
}

trueこの場合は戻ります。

@ jon-skeetのコメントに基づく。


0

これは、現在のページのURLに対してこれをテストする簡単な方法です。

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

-2

「#anchorlink?firstname = mark」などの完全なクエリ文字列が表示される場合があります

これは、ハッシュ値を取得するためのスクリプトです。

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

returns -> #anchorlink

6
ハッシュはクエリ文字列の後に追加され、サーバーに送信されることはないため、不可能です。クエリ文字列の前にハッシュが表示されるのは、URLを手動で変更したときだけです。

1
うん、でも時々人々はこのフォーマットでURLを送る。これは、ハッシュ値のみを取得して他の値を無視できるようにするためです。:)
markg 2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.