JavaScript를 사용하여 URL에서 #hash를 어떻게 확인할 수 있습니까?


783

#URL에 해시 ( ) 앵커 링크 가있는 경우에만 실행하려는 jQuery / JavaScript 코드가 있습니다. JavaScript를 사용하여이 문자를 어떻게 확인할 수 있습니까? 다음과 같은 URL을 감지하는 간단한 포괄 테스트가 필요합니다.

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

기본적으로 다음과 같은 내용이 있습니다.

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

누구든지 올바른 방향으로 나를 가리킬 수 있다면 대단히 감사하겠습니다.

답변:


1404

단순한:

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. 거기에서 쿼리 문자열 추출 질문 을 쳐서 문자열 이외의 것을 얻으십시오.
patridge

1
@hitautodestruct :이 질문은 해시 변경에 관한 것이 아니라 페이지로드에 존재하는지 여부입니다.
Gareth

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#은 ''를 반환합니다.
Jessy

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입니다. 인덱스로 액세스하는 것은 다음과 같이 Object 속성에 액세스하는 것과 같습니다 obj['0']. JS에서는 이것이 사실입니다. arr[0] === arr['0']따라서 인덱스 / 키가 존재하지 않으면 반환 된 값이 범위를 벗어난 대신 정의되지 않습니다. jsfiddle.net/web5me/Mw376
Marc Diethelm

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를 혼합 한이 답변처럼 이미이 접근법을 구현했습니다.
Arthur Kushman

13
window.location.hash 

해시 식별자를 반환합니다


짧고 깨끗하며 완벽합니다
Jam


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의 경우에만 해당됩니다. 다른 브라우저에는 onhashchange 이벤트가 포함되어 있습니다.
Tokimon

@Tokimon-좋아! 나는 몰랐다. 하지만 우리는 여전히 IE의 이전 버전을 지원해야한다고 생각합니다.
Emmanuel

1
그래 슬프게도 XP에서 IE 9가 지원되지 않으면 IE 8도 사라지지 않을 것입니다. (
Tokimon

1
modernizr.com 은 구식 브라우저에서 다양한 최신 기능과 함께 hashchange 이벤트를 구현합니다.
guigouz

4
이것은 권장 코드가 아닙니다 setTimeout(checkHash, 400). 최소한 다음과 같아야합니다 . 또한 최신 브라우저에는 hashchange이벤트가 있으므로을 (를) 수행 할 수 있습니다 window.addEventListener('hashchange', function(){ … }). 마지막으로 전역 hash변수 누출은 권장되지 않는 또 다른 사례입니다.
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

위의 Partridge 및 Gareths 의견은 훌륭합니다. 그들은 별도의 답변이 필요합니다. 분명히 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하면 불법 생성자임을 알 수 있습니다. 당신은 여전히 같은 것들을 얻을 수 있습니다 hash, query, protocol로 문자열을 설정하여 등 href다음 모든 주소 등록 정보를 공유하는 DOM 앵커 요소의 특성 window.location.

가장 간단한 방법은 다음과 같습니다.

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

string.hash;

편의상, 나는 이것을 사용하여 기본 Location생성자를 문자열을 가져 와서 window.location비슷한 객체를 생성 하는 것으로 대체하는 작은 라이브러리를 작성했습니다 : Location.js


1

일반적으로 클릭 수는 위치 변경보다 우선이므로 클릭 후 업데이트 된 window.location.hash를 설정하려면 timeOut을 설정하는 것이 좋습니다.

$(".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
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.