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而不刷新？

回答

相关问题