jquery - 如何通过 AJAX 检测 url 更改而无需在 jQuery 中重新加载？

Question

我有一个用户脚本(适用于 Chrome)，我用它来格式化 duolingo 的练习页面。它只应用一行 css

jQ(document).ready(function(){
    jQ('#start-button').css({"float": "left", "margin-right": "10em"});
});

当我第一次访问该页面时，效果很好。但他们使用 Ajax 来避免页面重新加载。并且 url 确实发生变化，因此，如果我检测到这一点，我可以刷新 css 更改，而不会丢失此网站导航模式的格式。

有人碰巧知道检测它的好方法吗？

编辑:完整的用户脚本实现了几个最初指出的流行解决方案(这不起作用):

// ==UserScript==
// @name         duolingo
// @namespace    http://your.homepage/
// @version      0.1
// @description  reformat /skills to not start timed practice by default
// @author       You
// @include      /^https?\:\/\/www\.duolingo\.com\/(skill|practice)?\/?.*/
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @grant        none
// ==/UserScript==

window.jQ=jQuery.noConflict(true);

jQ(document).ready(function(){
    style_duolingo();
});
jQ(window).bind('hashchange', function() {
    style_duolingo();
});
jQ(document).ajaxComplete(function() {
    style_duolingo();
});


function style_duolingo() {
    jQ('#start-button').css({"float": "left", "margin-right": "10em"});
    console.log("Tampermonkey script: wrote css change");
}

编辑#2:

获得赏金奖励

请提供一个不加载外部库的工作解决方案(我想知道我缺少什么，而不是将其保存在黑匣子中)，并使用事件解决问题(没有基于间隔的解决方案)。如果事件(奇怪地)无法使用，请提供更正方案以及事件没有被触发的原因。

Answer 1

要更改 url，Duolingo 使用history.pushstate。我推荐你galambalazs answer to similar question

这是他的代码:

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
    if (typeof history.onpushstate == "function") {
        history.onpushstate({state: state});
    }

    //Custom code here
    style_duolingo();

    return pushState.apply(history, arguments);
}
})(window.history);