如何通过AJAX检测网址更改而无需在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 回答类似的问题

这是他的代码：

(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);