Co strony internetowe takie jak YouTube używają do zmiany adresu URL bez wywoływania popstate lub beforeunload?

Question

Zauważyłem, że YouTube nie przeładowuje się ponownie po kliknięciu linku/wideo w ich witrynie. Jeśli zdefiniujesz zmienną w konsoli, zobaczysz, że będzie się ona utrzymywać.

Ale ani popstate ani beforeunload nie zostaną zwolnieni. Jak więc Youtube to osiąga? I jak mogę wykryć, że zmiana adresu URL bez ustawiania zegara stale sprawdza pasek adresu URL.

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

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

Nie szukam tylko rozwiązania YouTube, szukam ogólnego rozwiązania, które obejmie technologię, z której korzysta YouTube.

Answer 1

Używają one onpopstate. Wklej swoją JavaScript do konsoli JavaScript, kliknij wideo, a następnie kliknij przycisk Wstecz. Powinieneś teraz zobaczyć "test Popstate!" w konsoli.

Prawdziwy problem polega na tym, że nie ma zdarzenia onpushstate, ale . Był też previous StackOverflow question about it. Nie wydaje się to jednak działać w YouTube, być może dlatego, że próbują edytować właściwość pushState pod numerem history, ale YouTube faktycznie zapisał history.pushState w osobnej zmiennej, przez co ten kod nie ma wpływu.

Jednak ten transitionend event on the #progress element just for YouTube wydaje się działać.

Answer 2

Można to faktycznie zrealizować w bardzo prosty sposób. Załóżmy, że masz link na swojej stronie internetowej

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

można przesłonić jego zachowanie wracając false z obsługi zdarzeń:

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; 
} 

Stosując tę ​​technikę można dokonać tylko część odświeżyć stronę po kliknięciu połączyć.

Edit

wierzę youtube nie słucha się w żaden sposób do zmiany lokalizacji. Dzieje się tak, ponieważ jeśli zadzwonisz pod numer

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

Strona internetowa jest wciąż odświeżana.