로케이션 해시의 변경을 검출하려면 어떻게 해야 합니까?

로케이션 해시의 변경을 검출하려면 어떻게 해야 합니까?

네비게이션에는 Ajax와 해시를 사용하고 있습니다.

경우, 이 정보가 있는지 할 수 있는 ?window.location.hash렇게변고고고고고?

http://example.com/blah#123에서 http://example.com/blah#456으로

서류가 로딩될 때 확인하면 됩니다.

하지만 #해시 기반의 내비게이션이 있으면 브라우저의 뒤로 버튼을 눌러도 작동하지 않습니다(blah #456에서 blah #123으로 점프합니다).

주소창 안쪽에 표시되는데 자바스크립트로는 안 잡히네요.

이것을 실제로 실행하는 유일한 방법(「really simple history」가 이것을 실시하는 방법)은, 현재의 해시를 계속 체크하는 간격을 설정하는 것입니다.또, 이것을 이전의 해시와 비교해 보면, 해시가 변경되었을 경우에 기동하는 변경된 이벤트에 가입할 수 있습니다.완벽하지는 않지만 브라우저는 이 이벤트를 네이티브로 지원하지 않습니다.

---

최신 답변을 유지하려면 업데이트:

jQuery(오늘날 대부분의 경우 기초가 되어야 함)를 사용하는 경우 jQuery의 이벤트 시스템을 사용하여 창 개체에서 해시 변경 이벤트를 재생함으로써 jQuery가 제공하는 추상화를 사용하는 것이 좋습니다.

$(window).on('hashchange', function() {
  //.. work ..
});

여기서 좋은 점은 해시 변경 지원에 대해 걱정할 필요가 없는 코드를 작성할 수 있다는 것입니다.다만, 조금 덜 알려진 jQuery 기능 jQuery 스페셜이벤트의 형태로 몇 가지 마법이 필요합니다.

이 기능을 사용하면 기본적으로 모든 이벤트에 대해 몇 가지 설정 코드를 실행할 수 있습니다. 즉, 누군가가 이벤트를 처음 사용하려고 할 때(이벤트에 바인딩하는 경우 등)입니다.

이 셋업 코드에서는 네이티브브라우저 지원을 체크할 수 있습니다.브라우저가 네이티브로 이 기능을 실장하지 않는 경우는, 변경을 폴링 하는 타이머를 1개 설정해, jQuery 이벤트를 트리거 할 수 있습니다.

이것에 의해, 코드의 서포트 문제를 이해할 필요가 없어집니다.이러한 종류의 특별한 이벤트의 실장은(단순한 98%의 작업 버전을 취득하기 위해서) 매우 간단하지만, 다른 누군가가 이미 이 문제를 이해하고 있는데, 왜 그렇게 하는 것일까요.

HTML5는 이벤트를 지정합니다.이 이벤트는 현재 모든 최신 브라우저에서 지원됩니다.지원은 다음 브라우저 버전에서 추가되었습니다.

• Internet Explorer 8
• 파이어폭스 3.6
• 크롬 5
• 사파리 5
• 오페라 10.6

7 및 Internet Explorer 7 "Internet Explorer 9"는 과 같습니다.if는 true의 경우이지만, statement는 true("onhashchange"의 경우)입니다.window.onhashchange는 기동하지 않기 때문에 모든 버전의 Internet Explorer에서 변경 여부에 관계없이 100밀리초마다 해시를 저장하고 체크하는 것이 좋습니다.

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

- 이후 - jQuery 1.9$.browser.msie는 지원되지 않습니다.출처 : http://api.jquery.com/jquery.browser/

History와 window.location에는 많은 요령이 있습니다.IE 브라우저의 해시:

• 원래 질문대로 a.html#b페이지에서 a.html#c페이지로 이동한 후 뒤로 버튼을 누르면 브라우저는 해당 페이지가 변경된 것을 인식하지 못합니다.예를 들어 window.location을 말씀드리겠습니다.href는 a.dev#b인지 a.dev#c인지에 관계없이 'a.dev#c'가 됩니다.

• 실제로 a.devel#b 및 a.devel#c는 페이지에 '<a name="#b">' 및 '<a name="#c">' 요소가 이미 존재하는 경우에만 이력에 저장됩니다.

• 단, 페이지 내에 iframe을 삽입할 경우 해당 iframe 내의 a.html#b에서 a.html#c로 이동한 후 뒤로 버튼 iframe.contentWindow.document.location을 누릅니다.href는 예상대로 변경됩니다.

• 코드에서 'something.domain=something'을 사용하면 iframe.contentWindow.document.open()에 액세스할 수 없습니다(많은 History Manager가 이를 수행합니다).

이게 진짜 답이 아닌 건 알지만 IE-History note가 누군가에게 유용할 수도 있어

파이어폭스는 3.6 이후 해시 변경 이벤트가 발생하고 있습니다.window.onhashchange를 참조하십시오.

리액트 어플리케이션에서 사용하고 있는 것으로, 유저의 뷰에 따라 URL에 다른 파라미터를 표시하고 있었습니다.

hash 파라미터의 표시는

window.addEventListener('hashchange', doSomethingWithChangeFunction);

그리고나서

function doSomethingWithChangeFunction () {
    let urlParam = window.location.hash; // Get new hash value
    
    // ... Do something with new hash value
};

브라우저의 정방향 및 후방향 버튼 조작, 브라우저 이력 조작.

"window.location" 객체의 "해시" 속성에 옵서버("watch" 메서드)를 쉽게 구현할 수 있습니다.

파이어폭스는 오브젝트의 변경을 감시하기 위한 독자적인 실장이 있습니다만, 그 외의 실장(예를 들면 JavaScript의 오브젝트 속성 변경 감시)을 사용하고 있는 경우는, 그 방법이 유효합니다.

코드는 다음과 같습니다.

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

그런 다음 테스트할 수 있습니다.

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

그리고 물론 그것이 당신의 관찰자 기능을 작동시킬 것이다.

또 하나의 뛰어난 구현은 jQuery History입니다.jQuery History는 네이티브 onhashchange 이벤트가 브라우저에 의해 지원되는 경우 네이티브 onhashchange 이벤트를 사용합니다.지원되지 않는 경우 브라우저의 iframe 또는 interval을 적절하게 사용하여 예상되는 모든 기능이 정상적으로 에뮬레이트되도록 합니다.또, 특정의 스테이트에 바인드 할 수 있는 인터페이스도 갖추고 있습니다.

jQuery History를 확장한 jQuery Ajaxy도 주목할 만한 프로젝트입니다.해시와 함께 아약스를 사용하기 시작하면 매우 복잡해집니다!

var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

바로 그거야...이제 뒤로 또는 앞으로 버튼을 누를 때마다 새로운 해시 값에 따라 페이지가 새로고침됩니다.

클라이언트 측 라우팅에 path.js를 사용하고 있습니다.꽤 간결하고 가벼우며(NPM에도 게재되어 있습니다), 해시 베이스의 네비게이션을 사용하고 있습니다.

path.js NPM

path.js GitHub

언급URL : https://stackoverflow.com/questions/680785/how-can-i-detect-changes-in-location-hash