On-window.location.hash-변경 하시겠습니까?

탐색을 위해 Ajax와 해시를 사용하고 있습니다.

window.location.hash이와 같이 변경 되었는지 확인하는 방법 이 있습니까?

http://example.com/blah # 123 ~ http://example.com/blah # 456

문서가로드 될 때 확인하면 작동합니다.

그러나 #hash 기반 탐색 기능이 있으면 브라우저에서 뒤로 버튼을 누를 때 작동하지 않습니다 (따라서 blah # 456에서 blah # 123으로 이동).

주소 상자 안에 표시되지만 JavaScript로는 잡을 수 없습니다.

실제로이 작업을 수행하는 유일한 방법 (그리고 '실제로 간단한 역사'가이를 수행하는 방법입니다)은 현재 해시를 계속 확인하는 간격을 설정하고 이전과 비교하여 간격을 설정하여 구독자를 변경하도록 구독합니다 해시가 변경되면 발생하는 이벤트입니다. 완벽하지는 않지만 브라우저는이 이벤트를 기본적으로 지원하지 않습니다.

이 답변을 최신 상태로 유지하려면 업데이트하십시오.

jQuery를 사용하는 경우 (오늘날 다소 기초가되어야 함) 멋진 해결책은 jQuery가 제공하는 추상화를 사용하여 이벤트 객체를 사용하여 창 객체에서 hashchange 이벤트를 수신하는 것입니다.

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

여기서 좋은 점은 해시 체인지 지원에 대해 걱정할 필요가없는 코드를 작성할 수 있지만 다소 덜 알려진 jQuery 기능인 jQuery special events의 형태로 마술을 수행해야한다는 것 입니다.

이 기능을 사용하면 기본적으로 어떤 사람이 처음으로 어떤 방식 으로든 이벤트를 사용하려고 할 때 (예 : 이벤트 바인딩) 이벤트에 대해 일부 설정 코드를 실행하게됩니다.

이 설정 코드에서 기본 브라우저 지원을 확인할 수 있으며 브라우저가 기본적으로이를 구현하지 않는 경우 단일 타이머를 설정하여 변경 사항을 폴링하고 jQuery 이벤트를 트리거 할 수 있습니다.

이것은 코드 가이 지원 문제를 이해해야 할 필요성을 완전히 풀어줍니다.이 종류의 특수 이벤트 구현은 간단합니다 (단순한 98 % 작업 버전을 얻기 위해). 그러나 누군가 다른 사람이 이미 가지고있을 때 왜 그렇게합니까 ?

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

• 인터넷 익스플로러 8
• Firefox 3.6
• 크롬 5
• 사파리 5
• 오페라 10.6

Internet Explorer 7 및 Internet Explorer 9의 if경우이 설명은 Windows에서 "onhashchange"에 대해 true를 제공하지만 window.onhashchange실행되지는 않으므로 해시를 저장하고 변경 여부에 상관없이 100 밀리 초마다 확인하는 것이 좋습니다. 모든 버전의 Internet Explorer

    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/

IE 브라우저에서 History 및 window.location.hash를 다루는 많은 트릭이 있습니다.

• 원래 질문에서 말했듯이 a.html # b 페이지에서 a.html # c 페이지로 이동 한 다음 뒤로 버튼을 누르면 브라우저가 해당 페이지가 변경되었음을 알 수 없습니다. a.html # b 또는 a.html # c에 있더라도 window.location.href는 'a.html # c'가됩니다.

• 실제로 a.html # b 및 a.html # c는 페이지에 '<a name="#b">'및 '<a name="#c">'요소가 있는 경우 에만 히스토리에 저장됩니다 .

• 그러나 페이지 안에 iframe을 넣은 경우 해당 iframe에서 a.html # b에서 a.html # c로 이동 한 다음 뒤로 버튼을 누르면 iframe.contentWindow.document.location.href가 예상대로 변경됩니다.

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

나는 이것이 실제 반응이 아니라는 것을 알고 있지만 IE 역사 기록은 누군가에게 유용 할 것입니다.

Firefox는 3.6 이후 onhashchange 이벤트를 가졌습니다. window.onhashchange를 참조하십시오 .

Ben Alman은 이것을 처리하기위한 훌륭한 jQuery 플러그인을 가지고 있습니다 : http://benalman.com/projects/jquery-hashchange-plugin/

jQuery를 사용하지 않는다면 해부에 대한 흥미로운 참조가 될 수 있습니다.

"window.location"개체의 "hash"속성에서 관찰자 ( "watch"메서드)를 쉽게 구현할 수 있습니다.

Firefox에는 객체의 변경 사항을 감시 하는 자체 구현이 있지만 다른 브라우저 (예 : 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;

물론 그것은 관찰자 기능을 유발할 것입니다.

나는 이것을 반응 응용 프로그램에서 사용하여 사용자가 어떤보기에 따라 URL이 다른 매개 변수를 표시하게했습니다.

나는 사용하여 해시 매개 변수를 보았다

window.addEventListener('hashchange', doSomethingWithChangeFunction());

그때

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

치료를 해왔으며 앞으로 및 뒤로 브라우저 버튼과 함께 작동하며 브라우저 기록에서도 작동합니다.

적절한 구현은 http://code.google.com/p/reallysimplehistory/ 에서 찾을 수 있습니다 . Internet Explorer에서 위치 해시를 수동으로 수정하면 전체 기록 스택이 재설정됩니다 (브라우저 문제이므로 해결할 수 없음).

Internet Explorer 8은 "hashchange"이벤트를 지원하며 HTML5의 일부가되어 다른 브라우저를 따라 잡을 수 있습니다.

또 다른 훌륭한 구현은 브라우저에서 지원하는 경우 기본 onhashchange 이벤트를 사용하는 jQuery History 입니다. 또한 특정 상태에 바인딩 할 수있는 훌륭한 인터페이스를 제공합니다.

주목할만한 또 다른 프로젝트는 jQuery Ajaxy 로, jQuery History가 믹스에 아약스를 추가하는 확장 기능입니다. 해시와 함께 ajax를 사용하기 시작할 때 꽤 복잡합니다 !

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

jQuery 플러그인 HUtil을 사용하고 인터페이스와 같은 YUI History를 작성 했습니다.

한 번 확인하십시오. 도움이 필요하면 도와 드릴 수 있습니다.