Question

我在Facebook上运行一个脚本，要求我在我的朋友＆＃34;中获取人物的ID。窗口（这可能不是完成此特定任务的最有效方法，但由于我想知道如何通常这样做，这是一个很好的例子。）

这意味着，如果我有多个朋友，我必须向下滚动才能将Facebook添加到页面中。

我添加了将页面向下滚动到页脚的逻辑，但我不知道如何强制我的函数抓取内容加载后运行的ID。

目前，我已经使用了setTimeout几秒钟 - 显然，这并不是在适当的时候保证，所以我想知道如何正确地做到这一点：

var k;
function doit(){

    k = document.getElementsByClassName("_698");

    var g= Array.prototype.slice.call(k);
    confirm(g.length);
    // the confirm is just to make sure it's working 
    // (if i don't use setTimeout it'll return a smaller number 
    //  since not all the friends were included)

} 

window.addEventListener("load", function(){ 
  document.getElementById( "pageFooter" )
    .scrollIntoView();setTimeout(doit,3000);
  });

Answer 1

Crayon Violent详细介绍了如何在his answer to JavaScript detect an AJAX event中完成此操作。诀窍是挂钩底层的XMLHttpRequest对象，以便检测何时发送请求。

我在那里重新编写了一些逻辑，使其更适合您的需求：

//
// Hooks XMLHttpRequest to log all AJAX requests. 
// Override ajaxHook.requestCompleted() to do something specific 
// in response to a given request.
//
var ajaxHook = (function()
{
   // we're using a self-executing function here to avoid polluting the global
   // namespace. The hook object is returned to expose just the properties 
   // needed by client code.
   var hook = { 
     // by default, just logs all requests to the console. 
     // Can be overridden to do something more interesting.
     requestCompleted: function(xmlHttp, url, method) { console.log(url); } 
   };

   // hook open() to store URL and method
   var oldOpen = XMLHttpRequest.prototype.open;
   XMLHttpRequest.prototype.open = function(method, url)
   {
      this.hook_method = method;
      this.hook_url = url;
      oldOpen.apply(this, arguments);
   }

   // hook send() to allow hooking onreadystatechange
   var oldSend = XMLHttpRequest.prototype.send;
   XMLHttpRequest.prototype.send = function()
   {
      var xmlhttp = this;

      //hook onreadystatechange event to allow processing results
      var oldReadyStateChange = xmlhttp.onreadystatechange;
      xmlhttp.onreadystatechange = function()
      {
         oldReadyStateChange.apply(xmlhttp, arguments);

         if ( this.readyState === 4 ) // completed
         {
            hook.requestCompleted(xmlhttp, 
              xmlhttp.hook_url, xmlhttp.hook_method);
         }
      };

      oldSend.apply(this, arguments);
   };

   return hook;
})();

在用户脚本中加载了这段代码后，您可以按如下方式实现逻辑：

var k;
function doit()
{
    k = document.getElementsByClassName("_698");

    var g= Array.prototype.slice.call(k);
    confirm(g.length);
} 

window.addEventListener("load", function()
{     
   ajaxHook.requestCompleted = function(xmlhttp, url, method)
   {
      // is this the request we're interested in? 
      // (Facebook appears to load friends from a URL that contains this string)
      if ( /AllFriendsAppCollectionPagelet/.test(url) ) 
      {
         // Facebook defers rendering the results here, 
         // so we just queue up scraping them until afterwards
         setTimeout(doit, 0); 
      }
   };

  // trigger loading of more friends by scrolling the bottom into view
  document.getElementById( "pageFooter" )
    .scrollIntoView();
});

如何检测是否已加载新内容以响应滚动触发器？

1 个答案: