Ajax: How to detect url change with javascript without refreshing?

Question

I'm trying to make a script (with greasemonkey) that will run on facebook's timelime log page. The script is executed, but I have to reload the page to make it run (because facebook uses AJAX to change pages).

I tried as suggested here and used the hashchange event :

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,
});

But I still have to refresh to make the script run (hashchange seems to have no effect).

How could I fix this?

If I understand correctly, you also need to catch AJAX refreshments which do not trigger a URL change, right? If so, querying the URL won't help you. But you should be able to do everything with `MutationObserver`s, or not? — Siguza, Sep 06 '15 at 16:38
@Siguza URL changes can be catched with mutationObserver? I didn't know, how? I though It was only about nodes in the page. — vmonteco, Sep 07 '15 at 16:37

score 0 · Accepted Answer · answered Sep 08 '15 at 23:59

As @Siguza suggested, I used MutationObservers.

But I didn't know how to inspect a mutation to know if its type is an "Url change". So I just checked with function for each mutation occuring.

I also had to set flags to check if the buttons I wanted to add were already added or not.

I had to create two ways to add the buttons I wanted to add, one is a simple function that checks if the target element (to contain the buttons) already exists, the second one is the MutationObserver targeted by the creation of this element.

So I get something like this :

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

I hope than this will help somebody else.

Ajax: How to detect url change with javascript without refreshing?

1 Answers1