해시 또는 반복없이 URL 변경 감지

Question

URL이 기록 API를 통해 변경되는 Google 순간 검색 유형의 항목이 있습니다. 사용자가 한 쿼리에서 다른 쿼리로 이동 한 다음 뒤로 단추를 누르면 아무런 문제가 발생하지 않는 문제가 발생합니다. 검색 주소창의 URL이 변경됩니다. 뒤로/앞으로 버튼이 눌려 지거나 URL이 바뀌거나 화재 및 이벤트가 발생하면이를 감지해야합니다. 어쨌든 현대 브라우저에서만 내 사이트에 액세스 할 수 있으므로이 기능은 최신 브라우저에서만 작동합니다.

인스턴트가 아니기 때문에 반복을 사용하지 않는 것이 좋으며 이벤트만큼 간단하지도 않습니다. 더 간단한 다른 방법이 있습니까? 감사.

Answer 1

URL popstate로 URL이 변경 될 때마다 windows popstate 이벤트가 발생합니다.이 이벤트는 ajax 또는 사용중인 모든 사이트 콘텐츠를 변경하는 데 사용해야하며 브라우저의 뒤로/앞으로 버튼에서 실행됩니다. . 일부 브라우저의 경우 첫 번째 페이지로드가 발생하기 때문에이를 확인해야합니다.

정말 전체 깃털 기본 JS 이벤트 핸들러 예를 들어 무엇을하지를 쓸 시간이 없어,하지만 여기에 빠른 jQuery를 버전입니다 :

var checkForFirstLoad = true; 

$(window).on({ 
    load: function() { 
     checkForFirstLoad = false; 
    }, 
    popstate:function(e) { 
     if (checkForFirstLoad) { 
      updatePage(e.originalEvent.state!=null ? e.originalEvent.state.page : document.location.pathname, true); 
     }else{ 
      checkForFirstLoad = false; 
     } 
    } 
}); 

function updatePage(pageURI, type, switchContent) { 
    if (!type) { 
     history.pushState({ page: pageURI }, page, pageURI); 
    } 
    if (switchContent) { 
     //replace site content etc. 
    } 
} 

이 그냥 정말 간단한 예를 들어 지금, 그리고 클릭 한 링크가 현재 url과 동일한 href를 갖고 있는지 확인하고, 다른 URL을 인식하는 등 브라우저 도움말을 확인하는 등 더 많은 작업이 진행되고 있습니다. 개체 리터럴에 몇 천 줄의 코드가있는 프로젝트에서이 URL을 복사했습니다. 그래서 여러분은 popstate의 작동 방식과 여러분의 코드에서 어떻게 사용하는지 정확하게 알아 내야 할 것입니다.