2017-12-21 4 views
2

페이지 매기기 및 필터가있는 단일 페이지 앱이 있으며 현재 URL이 변경되는 경우이를 감지해야합니다. 청취자를 현재 URL에 추가하고 변경 될 때 뭔가를 트리거하는 간단한 방법은 없습니까? (단 하나 간격을 설정!)URL 매개 변수가 변경되는 경우의 리스너 이벤트

  1. 사용자 땅을 www.foobar.com
  2. 사용자가 뭔가, URL 변경 www.foobar.com?filter=hello하는 않습니다에
  3. 내 기능은
실행하지

나는 onhashchange를 시도해 보았고 unbeforeunload를 시도했지만 이것과 관련이 없습니다.

window.onbeforeunload = function(e) { 
    alert ('url changed!'); 
}; 

window.onhashchange = function() { 
alert ('url changed!'); 
} 

URL에 수신기를 추가하는 방법이 있으며 언제든지 변경됩니다. 당신은 setInterval을를 사용하지 않으려면 (다시, 단일 페이지 응용 프로그램 그래서 새로 고침)

+1

가능한 중복을 [자바 스크립트에서 URL의 변화를 감지하는 방법 (https://stackoverflow.com/questions/6390341/how-to-detect-url-change-in-javascript) – klugjo

+0

나는 그것을 보았다 - 그것은 "온하 체인지"시나리오 다. 내 것은 조금 다르다. 해시도없고, 나는 간격을 설정하고 싶지 않다. – user3390251

답변

1

, 당신은 history.pushState 이벤트 무시할 수 없다 :의

(function(history){ 
    const pushState = history.pushState; 
    history.pushState = function(state) { 
     if (typeof history.onpushstate == "function") { 
      history.onpushstate({state: state}); 
     } 
     // Call your custom function here 
     return pushState.apply(history, arguments); 
    } 
})(window.history); 
+0

이것이 가까워지고 있습니다! Uncaught TypeError의 콘솔 오류를줍니다. 'History'에 'pushState'를 실행하지 못했습니다 : 2 개의 인수가 필요하지만 1 개만 존재합니다. 사이트의 다른 코드와 충돌 할 수 있습니다 ... – user3390251

+0

왜'History'가'history'가되어야합니까? 대문자가 아님 – klugjo

+1

화살표 함수는'arguments' 객체를 노출시키지 않으므로'history.pushState = (state, ... args) => {'와'pushState.call (history, state, ... args); ' –