What do websites like YouTube use to change URLs without using popstate or beforeunload?

Question

I noticed that YouTube does not load when you click the link / video on your website. If you define a variable in the console, you will see that it will be saved.

But neither popstate nor beforeunload start. So how does Youtube do it? And how can I determine that changing the URL without doing a timer constantly checks the URL string.

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

I'm not just looking for a solution for YouTube, I'm looking for a general solution that covers the technology that YouTube uses.

Answer 1

They use onpopstate . Paste your JavaScript into the JavaScript console, click on the video and click on the back button. You should now see a pop-up test! in the console.

The real problem here is that there is no onpushstate event, but this person seems to have implemented it . There was also fooobar.com/questions/14177 / .... However, this does not seem to work for YouTube, perhaps because they are trying to edit the pushState history property, but YouTube actually saved history.pushState in a separate variable and thus this code does not change.

However, this transitionend event in the #progress element for YouTube only works.

Answer 2

It really can be realized really simply. Suppose you have a link on your web page.

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

You can override its behavior by returning false from the event handler:

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

Using this method, you can only do part of the page reload when you click a link.

Edit

I believe that youtube does not listen to location changes. This is because if you are actually calling

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

The webpage is still being updated.