YouTube 等网站在不触发 popstate 或 beforeunload 的情况下使用什么来更改 URL？答案

【问题标题】：What do websites like YouTube use to change the URL without fireing popstate or beforeunload?YouTube 等网站在不触发 popstate 或 beforeunload 的情况下使用什么来更改 URL？
【发布时间】：2017-06-06 00:24:47
【问题描述】：

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

【问题讨论】：

当他们使用 ajax 时，历史记录或 beforeunload-event 中没有条目。
Ajax改变地址栏的URL？？
他们真的完全改变了网址吗？据我所见，他们最后更改了查询标志(?v=6z-DCbOLYzc)：youtube.com/watch?v=6z-DCbOLYzc
首先，它有什么不同？我的意思是这不是一个主播。其次，如果您访问频道或主页，它肯定会比查询字符串发生更多变化。
是的，我知道你的意思，但 youtube 并没有什么特别之处，必须有一个常规的方法来完成它。我不太确定 iframe 是否用于跟踪历史记录，因为 history-iframe 也确实存在于常规 youtube 网站（id#history-iframe）上。非常有趣的话题！

标签： javascript youtube dom-events navigationbar

【解决方案1】：

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

<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'

网页仍在刷新。

【讨论】：

【解决方案2】：

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

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

但是，这个transitionend event on the #progress element just for YouTube 似乎有效。

【讨论】：

@Forivin 都不起作用？对我来说，onpopstate 测试肯定有效，但 onpushstate 东西不行。
好吧，因为 onpopstate 用处不大，我还没有真正尝试过。我的意思是想要一个在我导航到新网址时触发的事件，而不是在我按下后退按钮时触发。
@Forivin 我也很难找到适合我的onpushstate 事件库（即使当我调用history.pushState 时它可以工作，但当我转到一个新的 URL 时它不起作用），但至少这表明他们以某种方式使用历史状态，因为onpopstate 有效。
@Forivin 之前有人问过这个问题，YouTube 有一个临时解决方案：stackoverflow.com/questions/24297929/… 但是，这对我也不起作用。
@Forivin 我找到了一个似乎可行的解决方案，它来自上面链接的临时解决方案列表。请参阅编辑后的答案以获取更多信息。