Question

我注意到，当您点击其网站上的链接/视频时，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正在使用的技术的一般解决方案。

Answer 1

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

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

然而，这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;
}

使用此技术，您只需在点击链接时重新加载部分页面。

修改

我相信youtube不会以任何方式监听位置变化。这是因为如果你真的打电话

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

网页仍然刷新。

像YouTube这样的网站使用什么来更改网址而不会激活popstate或者之前的版本？

2 个答案: