0

I created the following Greasemonkey script to be executed on Firefox for all websites. Here's the script. The script basically gets all the links on the page and alerts the number of links. This is a small part of a project I am working on.

window.addEventListener("load", function(e) {
            var links = window.document.getElementsByTagName("a");
            //window.setTimeout(function(){alert(links.length);},3000);
            alert(links.length);
        }, false);

The script executed fine for some websites, but when I accessed reddit, the script is returning only 2 links, instead of all the links that are present on the page. When I tried to search for divs present on the page, it also returned only 2.

When I researched the page source, there was something related to inline javascript. But I could not understand it perfectly. Can anyone please help me why this is not working?

Thanks, Sid

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
Sid
  • 4,893
  • 14
  • 55
  • 110
  • 1
    Reddit is most likely loading the content via ajax. So the page loads, then the actual content loads later. Thus your script misses because of a timing issue. – mrtsherman Dec 16 '11 at 18:54
  • @mrtsherman I doubt that, becoz the page source does not seem like that. I am pretty sure everything is loaded on page load. I even tried using timeout, as the commented code suggests. It did not work as well. – Sid Dec 16 '11 at 19:07
  • 1
    The code shown works perfectly well on Reddit. Something **that you are not showing us** is the problem. Provide the full script and link to the *exact* page that has the problem. – Brock Adams Dec 16 '11 at 19:15
  • It did? This is all the code I have in the abc.user.js file that I am using to install as greasemonkey script on Firefox. I am getting result as 2, while the page obviously has tonnes of links. I will check again, though. – Sid Dec 16 '11 at 19:16

1 Answers1

1

It has to be AJAX content loads. If you execute your code from the debugger it works fine. So the only explanation is that the content isn't there after the load event. Try wrapping it in a timeout (ugly, but this should prove my point).

setTimeout(testLinks, 3000);

function testLinks() {
    window.addEventListener("load", function(e) {
        var links = window.document.getElementsByTagName("a");
        //window.setTimeout(function(){alert(links.length);},3000);
        alert(links.length);
    }, false);

}

Now that you know what the problem is, you can follow the instructions in this SO question to create an AJAX event listener. Then you can recalculate your number of links whenever new content loads.

JavaScript detect an AJAX event

Community
  • 1
  • 1
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • Thanks for a detailed explanation. But can you think of a security measure that the application may have employed on client side that is preventing from scripts executing? I am just curious. – Sid Dec 16 '11 at 19:14
  • 1
    It's not a security measure, its just how the page works. Your script executes perfectly well, the problem is that the content doesn't exist yet. After the page loads an asynchronous request is made to the server. This retrieves more content and dynamically loads it into the page. Unfortunately by this time your javascript has already executed. So what you need to do is detect those data load events and recalculate the number of links for each one. – mrtsherman Dec 16 '11 at 19:18