Ajax：如何檢測URL更改與JavaScript而不刷新？

我正在嘗試製作一個腳本（使用greasemonkey），它將在Facebook的時間日誌頁面上運行。該腳本已執行，但我必須重新加載頁面才能運行（因爲Facebook使用AJAX更改頁面）。Ajax：如何檢測URL更改與JavaScript而不刷新？

我試過的建議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似乎沒有任何效果）。

我該如何解決這個問題？

來源

2015-09-06 vmonteco

如果我理解正確，您還需要捕獲不會觸發URL更改的AJAX刷新，對吧？如果是這樣，查詢網址將無濟於事。但是你應該可以用'MutationObserver'來做所有事情，或者不？ – Siguza

@Siguza URL更改可以通過mutationObserver獲得？我不知道，怎麼樣？我雖然只是關於頁面中的節點。 – vmonteco

正如@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();

我希望比這將幫助別人。

來源

2015-09-08 23:59:30 vmonteco

Ajax：如何檢測URL更改與JavaScript而不刷新？

回答

相關問題