如何通过 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 并查看是否与之前的 url 匹配来检查任何 url 更改。它可能看起来像这样：

var oldURL = window.location.url;
var newURL = oldURL;
window.setInterval(function(){
    newURL = window.location.url;
    if(oldURL !== newURL){
        //the URL has changed
        oldURL = newURL; //to prevent the above from continuously firing
    }
}, 1000);// checks every 1000 ms (1s)

Answer 2

由于您只是在调整样式，因此最好使用允许您篡改 css 的 Stylish Chrome 扩展程序。然后你会添加

@-moz-document domain("www.duolingo.com") {
    #start-button {
        float: left;
        margin-right: 10em;
    }
}

注意@-moz-document 遵循用户样式约定，可导入 Chrome。实际上已经有几个published userstyles for duolingo :)

Answer 3

要更改 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);

Answer 4

像这样使用它：

jQ(document).ready(function(){

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

});

Answer 5

如果window 上的hashchange 事件失败，似乎还有一个plugin 允许这样做。