YouTube와 같은 웹 사이트는 popstate 또는 beforeunload를 실행하지 않고 URL을 변경하기 위해 무엇을 사용합니까?

Question

자신의 웹 사이트에서 링크/동영상을 클릭하면 YouTube가 실제로 다시로드되지 않는 것으로 나타났습니다. 콘솔에 변수를 정의하면 변수가 유지되는 것을 볼 수 있습니다.

그러나 popstate이나 beforeunload도 해고 당하지 않습니다. 그렇다면 유튜브는 어떻게 완성되고 있습니까? 그리고 타이머를 지속적으로 URL 표시 줄을 확인하지 않고 URL 변경을 어떻게 감지 할 수 있습니까?

window.onpopstate = function(event) { 
    console.log('popstate test!') 
    return "test" 
} 

window.onbeforeunload = function(event) { 
    console.log('beforeunload test!') 
    return "test" 
} 

저는 YouTube 솔루션을 찾고있는 것이 아니라 YouTube가 사용하는 기술을 포괄적으로 다루는 솔루션을 찾고 있습니다.

Answer 1

그들은 onpopstate을 사용하고 있습니다. 자바 스크립트 콘솔에 자바 스크립트를 붙여넣고 비디오를 클릭 한 다음 뒤로 버튼을 클릭하십시오. 이제 "popstate test!"가 보일 것입니다. 콘솔에.

여기 실제 문제는 onpushstate 이벤트가 아니라 this person seems to have implemented it입니다. previous StackOverflow question about it도 있습니다. 그러나 history의 pushState 속성을 편집하려고 시도했기 때문에 YouTube에서 효과가없는 것 같습니다. 그러나 YouTube는 실제로 history.pushState을 별도의 변수에 저장 했으므로이 코드의 영향을받지 않습니다.

그러나이 transitionend event on the #progress element just for YouTube이 작동하는 것 같습니다.

Answer 2

실제로 이것은 매우 간단한 방법으로 구현 될 수 있습니다. 당신이 당신의 웹 페이지

<a id="mylink" href="/new-url">My link</a> 

을 당신은 이벤트 처리기에서 false을 반환하여 동작을 재정의 할 수있는 링크가 있다고 가정 다음을 클릭하면이 기술을 사용

document.getElementById("mylink").onclick = function (event) { 
    window.history.pushState({urlPath:'/new-url'}, "", "/new-url"); 
    // use ajax to reload parts of the page here 
    return false; 
} 

당신은 페이지를 다시로드의 일부를 만들 수 있습니다 링크.

나는 유튜브가 위치 변경 어떤 방식으로 듣지 않는 생각

편집. 실제로 전화를 걸면

window.location = '/watch?v=notrelevant' 

웹 페이지가 아직 새로 고쳐지기 때문입니다.