在 Greasemonkey 用户脚本中监听 github.com PJAX 事件

Question

我正在处理的用户脚本在最初加载的 GitHub 页面上成功运行。虽然在使用 PJAX 导航 GitHub 时需要重新应用。

所以我必须以某种方式为 PJAX 更改设置一个侦听器并再次运行 initialize 函数。

由于 Greasemonkey/Firefox 安全策略，修补 unsafeWindow.history.pushState 将不起作用，它会抛出

错误：访问对象的权限被拒绝

我尝试检查页面脚本并挂钩到unsafeWindow.require('jquery') 的ajaxComplete 事件，但未触发侦听器（可能是因为相同的安全策略，但错误控制台为空）。

在 PJAX 容器元素上是否有比 MutationObserver/DOMSubtreeModified 更好的解决方案？

该脚本针对 Firefox/Greasemonkey，但如果它适用于 Chrome/Tampermonkey，这不会有什么坏处。

Answer 1

为文档上的“pjax:end”事件添加监听器：

$(document).on('pjax:end', ...)

FWIW 在 vanilla js 中工作 example。如您所见，还使用了 MutationObserver，因为站点脚本 sometimes 两次更新动态容器（完全丢弃第一个），因此，在 pjax:end 处理程序完成后，将 MutationObserver 处理程序附加到检测文件包装器的删除，在这种情况下重复处理：

document.addEventListener('pjax:end', pageChangedHandler);

function pageChangedHandler() {

    .......................

    var ovr = document.querySelector('include-fragment.file-wrap');
    if (ovr) {
        new MutationObserver(function(mutations) {
            mutations.forEach(m => {
                var removed = m.removedNodes[0];
                if (removed && removed.matches('.file-wrap')) {
                    this.disconnect();
                    pageChangedHandler();
                }
            });
        }).observe(ovr.parentNode, {childList:true});
    }
}