[javascript] JavaScript에서 해시 후 URL이 변경되었는지 감지하는 방법

locationchange이벤트 리스너 를 추가하고 싶었습니다 . 아래 수정 후에는 다음과 같이 할 수 있습니다.

window.addEventListener('locationchange', function(){
    console.log('location changed!');
})

대조적으로, window.addEventListener('hashchange',()=>{})URL에서 해시 태그 뒤에있는 부분이 변경되고 window.addEventListener('popstate',()=>{})항상 작동하지 않는 경우에만 실행됩니다 .

Christian의 답변 과 비슷한이 수정은 기록 개체를 수정하여 일부 기능을 추가합니다.

기본적으로 popstate이벤트가 있지만 pushstate및에 대한 이벤트가 없습니다 replacestate.

이렇게하면이 세 가지 기능이 수정되어 모든 사용자 locationchange가 사용할 사용자 지정 이벤트 pushstate와 해당 replacestate이벤트를 사용하려는 경우 이벤트가 발생합니다.

/* These are the modifications: */
history.pushState = ( f => function pushState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.pushState);

history.replaceState = ( f => function replaceState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('replacestate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.replaceState);

window.addEventListener('popstate',()=>{
    window.dispatchEvent(new Event('locationchange'))
});

답변

window.onhashchange = function() {
     //code  
}

$(window).bind('hashchange', function() {
     //code
});

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history, arguments);
    fireEvents('pushState', arguments);  // Some event-handling function
};

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

$(window).bind('hashchange', function() {
 /* things */
});

function hashHandler(){
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function(){
        if(that.oldHash!=window.location.hash){
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };
    this.Check = setInterval(function(){ detect() }, 100);
}

var hashDetection = new hashHandler();

window.addEventListener('hashchange', function(e){console.log('hash changed')});

window.addEventListener('popstate', function(e){console.log('url changed')});

// Bad code example

window.onhashchange = function() {
     // Code that overwrites whatever was previously in window.onhashchange  
}

var oldURL = "";
var currentURL = window.location.href;
function checkURLchange(currentURL){
    if(currentURL != oldURL){
        alert("url changed!");
        oldURL = currentURL;
    }

    oldURL = window.location.href;
    setInterval(function() {
        checkURLchange(window.location.href);
    }, 1000);
}

checkURLchange();