Ajax：如何在不刷新的情況下使用javascript檢測URL更改？

Question

我正在嘗試制作一個腳本（使用油脂猴子），該腳本將在facebook的timelime日志頁面上運行。 該腳本已執行，但是我必須重新加載頁面以使其運行（因為facebook使用AJAX來更改頁面）。

我按照這里的建議嘗試並使用了hashchange事件：

function check_timeline(){                          
    if (/(allactivity)/g.test($(location).attr('href'))){
        return true;
    }
    return false;
}

$(window).bind('hashchange', function() {
    if (check_timeline()){
        var observer = new MutationObserver(function (mutations){
            detect_node_for_buttons(mutations);
        });
    }
});

if (check_timeline()){
    var observer = new MutationObserver(function (mutations){
        detect_node_for_buttons(mutations);
    });
}

observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false,
});

但是我仍然必須刷新以使腳本運行（ hashchange似乎沒有作用）。

我該如何解決？

Answer 1

正如@Siguza所建議的，我使用了MutationObservers。

但是我不知道如何檢查突變，以了解其類型是否為“網址更改”。 所以我只是用功能檢查了每個突變的發生。

我還必須設置標志來檢查我要添加的按鈕是否已經添加。

我必須創建兩種添加想要添加的按鈕的方法，一種是檢查目標元素（包含按鈕）是否已經存在的簡單函數，第二種是創建此元素所針對的MutationObserver。

所以我得到這樣的東西：

// ==UserScript==
// @name        Facebook_cleaner
// @namespace   Facebook_cleaner
// @description cleans facebook timeline
// @include     http://*.facebook.com/*
// @include     https://*.facebook.com/*
// @require     http://code.jquery.com/jquery-1.7.1.min.js
// @version     1
// @grant       none
// ==/UserScript==

/*
** Variables :
*/

// Selectors :
var button_location = 'div[class="_2o3t fixed_elem"]';
var button_classes = '_42ft _4jy0 _11b _4jy3 _4jy1 selected _51sy';

// Flags :
var buttons_added = false;
var url_observer_launched = false;
var set = false;

/*
** Basic functions :
*/

function check_timeline()
{
    if (/(allactivity)/g.test($(location).attr('href'))){
        return true;
    }
    return false;
}

function reset(){
    buttons_added = false;
    set = false;
}

/*
** Evolved functions :
*/

function add_buttons(){
    buttons_added = true;
    set = true;
    add_all_button();
    add_one_button();
}

/*
** Event handling functions :
*/

function handling_url_change(mutations){
    mutations.forEach(function (mutation){
        if (check_timeline()){
//          console.log("buttons added : " + buttons_added);
            if (!buttons_added){
                var element = $(document).find(button_location);
                if (element && element.length > 0){
                    add_buttons();
                }
            }
        }else if (set){
            reset();
        }
    });
};

/*
** Mutation observers :
*/

var url_mutation_observer = new MutationObserver(handling_url_change);

/*
** Mutation observer starting functions :
*/

var dictionnary = {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
};

// Must start url_mutation_observer.
function start_url_observer(){
    url_mutation_observer.observe(document, dictionnary);
    url_observer_launched = true;
}

/*
** Launching :
*/

function launch()
{
    if (check_timeline()){
        if (!buttons_added){
            var element = $(document).find(button_location);
            if (element && element.length > 0){
                add_buttons();
            }
        }
    }else if (set){
        reset();
    }
    if (!url_observer_launched){
        start_url_observer();
    }
}

launch();

我希望這會幫助其他人。