每次在YouTube上加载新页面时如何运行脚本？

Question

从去年的某个时候开始,YouTube就让每个页面实际上都没有加载一个全新的页面,但主要只是重新加载内容div#content.当您点击YouTube中的链接并看到页面顶部的红色加载栏时,您会注意到这一点.

我有一个Greasemonkey脚本修改了YouTube上的元素,但是现在YouTube没有重新加载整个页面,Greasemonkey脚本不再在每个"新"页面上触发.如何在我加载到YouTube上的每个"新"页面上激活Greasemonkey脚本？

我在这个Greasemonkey脚本中使用jQuery.我尝试使用类似的功能.on(),DOMNodeInserted但我找不到合适的组合使其正常工作.使用我一直使用的事件监听器,我最终会为每个页面加载运行我的脚本数百次,例如使用以下内容:

$('div#page').on('DOMNodeInserted', 'div#content', function() { });

我想到的另一个解决方案是在YouTube上加载所有链接,就像正常情况一样,没有他们正在做的新方法.

Answer 1

经过一番研究,我自己想通了.首先,我不喜欢使用的解决方案setTimeout.这通常是一种有利于弃用的方法DOMNodeInserted(我在我的一些脚本中使用,但尽量避免使用),但如果可能的话,我总是更喜欢脚本实际执行后的解决方案事件.我已经发布了我最初在下面第一部分中使用的解决方案,然后是我在第二部分中使用的最终解决方案.以下所有代码都需要jQuery.

体面的解决方案,但不是最好的

起初,我有一个解决方案,我click在所有A元素中添加了一个事件,它将运行一个在2秒后运行我的脚本的计时器.这不是很优雅,因为如果页面加载很快,那么脚本没有运行会有一瞬间.如果页面加载超过两秒,那么脚本根本不会运行.脚本如下:

$('a').click(function()
{
    setTimeout(youtubeFunction, 2000);
});

更好的解决方案

所以我开始寻找与我想要完成的事情相关的解决方案.我最终找到了其他与我有类似问题的人(例如想要创建修改YouTube页面的Chrome脚本的人).这让我想到了这个特殊的Stack Overflow解决方案,它基本上说YouTube页面顶部的红色加载栏是一个CSS转换元素,transitionend它在完成后创建了一个(区分大小写)事件.链接解决方案中的代码并不完整(对我来说无论如何),但它确实解释了如何实现可行的解决方案.我每页只运行一次代码,这是完美的.所以这就是我现在所拥有的:

function youtubePageChange()
{
    youtubeFunction();
    $('body').on('transitionend', function(event)
    {
        if (event.target.id != 'progress') return false;
        youtubeFunction();
    });
}

$(youtubePageChange);

为了解释上面的代码,基本上我在第一次加载YouTube页面时运行一次代码(例如在地址栏中输入URL).然后,对于每个需要进度条的后续点击,代码将再次运行.

红色进度条形码

哦,以及将来参考,当红色进度条出现在YouTube页面的顶部时,该网站会临时添加一个新DIV的BODY,使用以下代码:

<div id="progress" class="waiting" style="transition-duration: 400ms; width: 99%;"><dt></dt><dd></dd></div>