How Can I Capture The Url Clicked?

I've got a server that loads an html page by echoing the result of a function *file_get_contents* to an URL. I want to get the URL that is clicked by the user after this. I've trie

Solution 1:

You want a script that looks like this:

(function() {
  functiononclick(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    if (target.tagName && target.tagName.toLowerCase() === 'a') {
      alert(target.href);
    }
  }

  if (document.body.addEventListener) {
    document.body.addEventListener('click', onclick, false);
  } elseif (document.body.attachEvent) {
    document.body.attachEvent('onclick', onclick);
  }
})();

This will work in IE and other browsers without using any JS libraries.

Solution 2:

a suggestion, using event delegation:

(function()
{
    functioncallback(e)//IE doesn't pass event object, but we'll fix that
    {
        var target;
        e = e || window.event;//get IE event
        target = e.target || e.srcElement;//IE againif (target.tagName !== 'A')
        {
            returntrue;
        }
        //a link has been clicked, target holds a reference to that link, e is the click eventalert(target.href);
        //to prevent the link to be followed:if (e.preventDefault)
        {// all major browsers, except for ie
            e.preventDefault();
            e.stopPropagation();
            returnfalse;
        }//now IE again:
        e.returnValue = false;
        e.cancelBubble = true;
        returnfalse;//not required to return here
    }

    if (document.body.addEventListener)
    {
        document.body.addEventListener('click',callback,false);
    }
    else
    {
        document.body.attachEvent('onclick',callback);//for IE > 9
    }
})();

This way, you only bind 1 event listener, to 1 handler, and it deals with all links that are clicked anywhere on your page. If you only want to block/handle certain links, you could give them a distinct class, and edit the callback function like so:

if(target.tagName !=='A')
//add extra check:
if (target.tagName !=='A'&& target.className !=='handleThisLinkClass')

google JavaScript event delegation, it's a really useful feature, especially when dealing with a large collection of elements that need event handlers

Solution 3:

Even simpler to understand, but this method uses JQuery, which is often included in many frameworks or cmses.

$(function(){
    $('a').click(function(){
        alert(this.href);
    });
});

Solution 4:

You should unbind a click events so that your events will start to work.

<?php
        $result = file_get_contents('http://www.google.com/');
        header('Content-Type: text/html; charset=iso-8859-1');
        echo $result;

        echo '<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>';
        echo '
        <scripttype="text/javascript">
        $(document).ready(function(){
            $(document).unbind("click").click(function(){ alert("Hi!"); });
            // similarly
            $("a").unbind("click").click(function(){ alert($(this).attr("href")); returnfalse; });
        });
        </script>';
?>