How do you determine html clicked on with javascript?

Question

Is it possible, with Javascript or some other technology to determine which hyperlink a user has clicked on, without changing the hyperlink source code.

For example: Can you click on a 'tag' button, then click on a hyperlink hosted in a different iframe, and be able to calculate which hyperlink the user clicked on, without changing any of the source code in that iframe?

Answer 1

you need to put an event on each a link , and then you will get all the information about the specific click.

this will work only in the some document, so if you try to do a test between the link inside an iframe and a link in your page you will not get an event for the iframe link.

in order to attach the event for all link you need to run on all the links in the page , the best way to do that is by jQuery selector. or other js framework like YUI

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

getElementsByTagName("a") - will give you all the links in the page.

Answer 2

Using jQuery, you are able to set the context of your selection. i.e.

$('a', $('#iframe-id')).click(function() {...});

You can then implement an event handler that will handle the iFrame hyperlink clicks. The "this" property within the handler will allow you to interrogate the hyperlink and obtain properties such as innerText etc.

Answer 3

I just thought of a solution, would this work, or are there other options?

The solution would be to proxy the content of the iframe soruce page, replacing href's with code to call a javascript function which would identify which href was clicked on.

This could then be used in conjunction with the tag'ing click to accurately tag a link.

This would also mean the original source, doesn't need to change at all.

Answer 4

What do you need ?-)

If you got an iframe, you use as a target for links, you must do some server-side processing or add something to the url of the links, that you can read when the page loads ...

But detecting time of page-load requires a script in the page, that is inside the iframe, or a function which tests the availability of the elements in the page in the iframe in short intervals ...

-- but you can only succeed if the page comes from the same domain as the main-page, as cross-domain scripting is illegal and thus impossible !-)

Answer 5

I think it should be possible. The contents of an IFrame is accessible from the outer document (the page in which the iframe is embedded) so you should be able to add event handlers (see other answers) on those elements after the iframe has loaded.

See also Wikipedia on Iframe which gives some examples and frameworks which actually work on content within an IFrame.

Answer 6

You can inject code into an iframe, but only if that iframe is on the same domain as the page you're injecting from, for obvious security reasons.

<iframe id="framedpage" src="framedpage.html"></iframe>
<button type="button" id="tagbutton">Tag</button>
<script type="text/javascript">
    function framedclicks_bind() {
        var f= document.getElementById('framedpage');
        var fdoc= f.contentDocument;
        if (!fdoc) fdoc= f.contentWindow.document; // for IE
        if (fdoc)
            for (var i= fdoc.links.length; i-->0;)
                fdoc.links[i].onclick= framedclicks_click; // bind to all links
    }
    function framedclicks_click() {
        alert('You clicked on '+this.href);
        return false; // don't follow link
    }
    document.getElementById('tagbutton').onclick= framedclicks_bind;
</script>

Might want to cleaning-up depending on application needs (eg. to ensure the frame is always loaded before trying to bind, or that unbinding can happen, or that any onclicks from the original links are remembered), but that'd be the general shape of things.

Answer 7

Good solution to find out which element was clicked is to use event delegation. If you attach event listener to each element using a loop (over document.links or document.getElementsByTagName), you have two problems: - browser has many listeners to maintain - events are attached only to elements that were in the DOM when you called the loop; any element dynamically added later doesn't have an event listener.

A simple example of event delegation:

document.onclick = function(e){
    e = e || window.event;
    var t = e.target || e.srcElement;
    if(t.nodeName=='A'){
        alert( t.href );
    }
}

If you want to find clicked link inside an iframe just use iframe's contentDocument instead of document.

Answer 8

Hi all,

Thanks for writing such valuable code.

My problem was something different.

it is ->

When user try to close their browser and if they have cart item which is not saved yet then browser should show a alert pop-up window to save cart. And if they save cart then no allert will come up.

I have successfully implemented the functionality.