Question

我试图制作一个将在facebook的timelime日志页面上运行的脚本（带有greasemonkey）。脚本已执行，但我必须重新加载页面才能运行（因为facebook使用AJAX来更改页面）。

我尝试按照建议here使用 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。

但我不知道如何检查突变，知道它的类型是否是＆＃34; Url更改＆＃34;。所以我只是检查了每个发生的突变的功能。

我还必须设置标志以检查我想添加的按钮是否已添加。

我必须创建两种方法来添加我想要添加的按钮，一种是检查目标元素（包含按钮）是否已经存在的简单函数，第二种是创建此目标的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();

我希望这比其他人更有帮助。

Ajax：如何使用javascript检测网址更改而不刷新？

1 个答案: