JS에서 URL 앵커 변경 이벤트 처리

88

URL 앵커의 변경 사항에 대해 실행될 JavaScript 콜백 코드를 어떻게 작성할 수 있습니까?

예를 들어 http://example.com#a~에서http://example.com#b

126

Google 맞춤 검색 엔진은 타이머를 사용하여 이전 값과 비교하여 해시를 확인하는 반면, 별도의 도메인에있는 하위 iframe은 iframe 문서 본문의 크기를 포함하도록 상위의 위치 해시를 업데이트합니다. 타이머가 변경 사항을 포착하면 부모는 스크롤바가 표시되지 않도록 본문의 크기와 일치하도록 iframe의 크기를 조정할 수 있습니다.

다음과 같은 결과가 동일합니다.

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
        storedHash = window.location.hash;
        hashChanged(storedHash);
    }
}, 100); // Google uses 100ms intervals I think, might be lower

Google Chrome 5, Safari 5, Opera 10.60 , Firefox 3.6 및 Internet Explorer 8은 모두 다음 hashchange이벤트를 지원합니다 .

if ("onhashchange" in window) // does the browser support the hashchange event?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }

함께 정리 :

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

jQuery에는 해시 변경 이벤트를 확인하고 필요한 경우 자체 제공하는 플러그인도 있습니다 ( http://benalman.com/projects/jquery-hashchange-plugin/) .

편집 : 업데이트 된 브라우저 지원 (다시).

— 앤디 E
소스

완전성을 위해 var storedHash = window.location.hash;함께 넣어 요약 블록에 추가하십시오. Btw : 요즘은 폴리 필이라고 생각합니다.

— Frank Nocke 2013 년

1

요즘 당신이들을 수 hashChange에 window stackoverflow.com/questions/6390341/how-to-detect-url-change

— 티모 Huovinen

@AndyE 나는 대답을 읽었고, 작은 메모를 놓 쳤고, 다음과 같은 이벤트를 본 적이 없습니다hashChanged(storedHash);

— Timo Huovinen

1

@TimoHuovinen : hashChanged이 경우,이 코드를 사용하여 개발자가 구현 한 함수입니다. 여기서 답변은 onhashchange이벤트를 사용할 수없는 경우 변경 사항에 대해 해시를 모니터링하는 방법을 보여주고 이벤트 기반 및 타이머 기반 접근 방식을 결합하여 범용 솔루션을 제공합니다. 내 요점은 당신이 링크 한 대답이 여기에 대한 대답에 절대적으로 아무것도 추가하지 않는다는 것입니다 ;-). 그들은 동일한 기본 정보, 심지어 Ben Alman의 jQuery 플러그인에 대한 링크를 제공합니다. 유일한 차이점은 내 대답에 순수한 JS 솔루션을 제공했다는 것입니다.

— Andy E

1

나는 가벼운 JS 라우터를 찾고 있었지만 이것은 일을 훌륭하게 수행했습니다. 또한 모든 종속성을 제거했습니다. :)

— gskema 2014-06-22

4

addEventListener덮어 쓰기 대신 사용 하는 것이 좋습니다 window.onhashchange. 그렇지 않으면 다른 플러그인에 대한 이벤트를 차단합니다.

window.addEventListener('hashchange', function() {
...
})

오늘날 글로벌 브라우저 사용을 살펴보면 더 이상 폴 백이 필요하지 않습니다.

— 파비안 폰 엘 러츠
소스

3

setInterval()현재로서는 유일한 범용 솔루션입니다. 하지만 미래에는 해시 체인지 이벤트의 형태로 약간의 빛이 있습니다.

— NilColor
소스

참고 : Mozilla 개발자 네트워크onhashchange 의 이벤트 문서

2

다른 SO 질문에서 볼 수 있듯이 유일한 브라우저 간 솔루션은 타이머입니다. 예를 들어이 질문 을 확인하십시오 .

— 페카
소스

1

(기록을 위해.) YUI3 "hashchange"합성 이벤트는 허용 된 답변과 거의 동일한 작업을 수행합니다.

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});

— mjhm
소스

0

여기에서 더 많은 정보를 얻을 수 있습니다.

돌연변이 이벤트 유형

변형 이벤트 모듈은 attr 및 텍스트 수정을 포함하여 문서 구조의 변경 사항에 대한 알림을 허용하도록 설계되었습니다.

— 라훌
소스

이것은 DOM 변경에 관한 것입니다.

— Raj