동일한 href 대상으로 hashbang/querystring 변경 감지 또는 캡처

Question

동일한 대상을 공유하는 여러 링크를 만들면 사이트가 실제로 요청을 다시로드하지 않고 링크 및 캡처를 캡처한다는 사실을 알게되었습니다 URL 요청을 완전히 다시로드하지 않고도 애플리케이션 내의 탭에로드하거나 페이지 내의 요소를 변경하여 다시로드 할 수 있습니다.

내 페이지에서 어떻게 감지합니까?

예를 들어, 내가 그 링크 중 하나를 클릭, 지금이

<a href="http://192.168.1.10/index.php?p=1#/tag/ABC-0021" target="myapp">0021</a>   
<a href="http://192.168.1.10/index.php?p=1#/tag/ABC-0031" target="myapp">0031</a> 
<a href="http://192.168.1.10/index.php?p=1#/tag/ABC-0012" target="myapp">0012</a> 

같은 외부 링크에서 매번 나오는 여러 링크를 처리 할, 내 전체 응용 프로그램/페이지는 브라우저 탭에서 새로 고침 그 표적에 대해서. 누구든지 이런 일이 발생하지 않도록하는 방법을 알고 있으므로 적절하게 처리 할 수 ​​있습니까?

편집 : Google 뮤직에서이 작업을 수행합니다. 링크를 클릭하면 탭을 열고 해당 탭을 화면의 다른 모니터/영역으로 옮깁니다. 다른 링크를 선택하면 Google 음악 콘텐츠가 변경되었지만 전체 앱이 완전히 새로 고쳐지지는 않습니다. https://jsfiddle.net/jonemzke/

편집 2 : 나는 window.onbeforeunload 또는 popstate 변경과 관련이 있다고 생각하지만,이 시나리오에서는 구체적인 코드 예제를 찾을 수 없습니다.

Answer 1

고마워 대한 window.onhashchange있다 - 내 경우에는 여기에 내가 더 있었다 어디 실제로 로컬 보안되지 않은 HTTPS 서버에 연결되지 않았기 때문에 그것이 유효한 SSL. 난 그냥 테스트 (및 보안 경고를 우회),하지만 브라우저가 매번 다시로드해야 할이 무언가를 고려하고 그것을 사용했다. 해시가있는 HTTPS가 아닌 HTTPS 사이트 나 실제 HTTPS 사이트로 전달하는 경우 원하는대로 새로 고치지 않습니다.

Answer 2

그

window.onhashchange = function() { 
 
     document.getElementById("hash").innerText = window.location.hash; 
 
    };

<a href = "#no_refresh">No Refresh</a> 
 
<a href = "#still_no_refresh">Still no Refresh</a> 
 
<br /> 
 
Current hash<div id = "hash"></div>

https://developer.mozilla.org/en/docs/Web/API/WindowEventHandlers/onhashchange