像YouTube这样的网站在不启动popstate或beforeunload的情况下使用什么来更改URL？

Posted 2021-05-03

我注意到，当您点击其网站上的链接/视频时，YouTube实际上并未重新加载。如果您在控制台中定义一个变量，您将看到它将保持不变。

但popstate和beforeunload都没有被解雇。那么Youtube是如何实现这一目标的呢？如何在不定时检查URL栏的情况下检测该URL更改。

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

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

我不只是在寻找YouTube解决方案，我正在寻找涵盖YouTube正在使用的技术的通用解决方案。

答案

他们正在使用onpopstate。将javascript粘贴到JavaScript控制台，单击视频，然后单击“上一步”按钮。你现在应该看到“popstate测试！”在控制台中。

这里真正的问题是没有onpushstate事件，但this person seems to have implemented it。还有一个previous StackOverflow question about it。然而，这似乎不适用于YouTube，也许是因为他们正在尝试编辑pushState的history属性，但YouTube实际上将history.pushState存储在一个单独的变量中，因此不受此代码的影响。

然而，这transitionend event on the #progress element just for YouTube似乎工作。

另一答案

实际上，这可以通过一种非常简单的方式实现。假设您的网页中有链接

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

使用此技术，您可以在单击链接时仅重新加载页面的一部分。

编辑

我相信youtube不会以任何方式改变位置。这是因为如果你实际打电话

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

该网页仍然刷新。