Javascript: how to determine if a link is targeted to the same domain as the page on which it is located?

Question

To track non-HTML documents using Google Analytics, I need the mentioned algorithm. He must:

• not hard domain code
• ignore protocol (i.e. http / https)
• do not worry about the presence / absence of "www" (any absolute links will be prefixed with "www" and all pages will be served through "www")

This is complicated by the fact that I need to access it through a function called from IE-only 'attachEvent'.

UPDATE Sorry, I have formulated this question very poorly. The real problem is getting this to work through the event, since IE has its own look and feel for event handling. Take the following:

function add_event(obj) { if (obj.addEventListener) obj.addEventListener('click', track_file, true); else if (obj.attachEvent) obj.attachEvent("on" + 'click', track_file); } function track_file(obj) { } 

It seems that the "obj" in track_file is not the same in all browsers - how can I refer to what was clicked in IE?

Answer 1

I would like to point out that if you are on so.com, the following links are URLs within the same domain:

• http://test.so.com
• http://so.com/index
• Index
• /index
• #
• / #
• https: //subdomain.so.com#hash
• mail.google.com
• mail.google.com/index.php?var=value#index

(this may seem strange, but the last two are valid: if you are on http://so.com , the latter will accept you http://so.com/mail.google.com/index.php?var=value that absolutely right)

This does not actually answer the question, but I hope that this will be guided by the rest of the answers. If there is anything else weird, feel free to add it.

Answer 2

It sounds like a comedic answer, but in all seriousness, it would be advisable that you can also do something like:

 $('a.external') 

Of course, comparing regexes with your window.location is a programmatic answer.

Answer 3

The binding method is not the only way to listen for events in IE and W3. For IE, you should read window.event.srcElement; in W3, this is event.target, where event is the parameter passed to the callback function.

If you don't need multiple event handlers in links, the old-school DOM 0 event handlers are probably an easier way for you to get close to this, allowing you to just “get it” in any browser.

 function bindtolinks() { for (var i= document.links.length; i-->0;) document.links.onclick= clicklink; } function clicklink() { if (this.host==window.location.host) { dosomething(); return true; // I'm an internal link. Follow me. } else { dosomethingelse(); return false; // I'm an external link. Don't follow, only do something else. } } 

Answer 4

Maybe this will help: http://www.quirksmode.org/js/events_properties.html#target

Answer 5

I will answer the question in the update about events in IE:

 function track_file(evt) { if (evt == undefined) { evt = window.event; // For IE } // Use evt } 

is a classic way to get a consistent event object in browsers.

After that, I will use regular expressions to normalize the URL, but I'm not sure what you need.

[EDIT] Some real code to put into practice what I wrote above ... :-)

 function CheckTarget(evt) { if (evt == undefined) { // For IE evt = window.event; //~ event.returnValue = false; var target = evt.srcElement; var console = { log: alert }; } else { target = evt.target; //~ preventDefault(); } alert(target.hostname + " vs. " + window.location.hostname); var re = /^https?:\/\/[\w.-]*?([\w-]+\.[az]+)\/.*$/; var strippedURL = window.location.href.match(re); if (strippedURL == null) { // Oops! (?) alert("Where are we?"); return false; } alert(window.location.href + " => " + strippedURL); var strippedTarget = target.href.match(re); if (strippedTarget == null) { // Oops! (?) alert("What is it?"); return false; } alert(target + " => " + strippedTarget); if (strippedURL[1] == strippedTarget[1]) { //~ window.location.href = target.href; // Go there return true; // Accept the jump } return false; } 

This test code, not production code, is obvious!

The lines with // ~ comments show an alternative way to prevent the user from clicking on the link to go. This is somehow more efficient, because if I use Firebug console.log, it is curious that return false is inefficient.
I used the "follow the link or not" behavior here, not knowing the real ultimate goal.

As pointed out in the comments, RE may be easier using the hostname instead of href ... I leave it because it is already encoded and may be useful in other cases.
In both cases, special precautions must be taken to handle special cases, such as localhost, IP addresses, ports ...
I got rid of the domain name before re-reading the question and see that this is not a problem ... Well, maybe this can be useful to someone else.

Note. I showed a similar solution in the issue of decorating links: Editing all external links using javascript

Answer 6

Given the click event and the original target element, this should work for the original question:

 if(target.protocol == window.location.protocol && target.host == window.location.host){ } 

Browsers perfectly convert the link from the various templates mentioned by @Tom to full links, so the protocol and host values ​​just have to match your domain.

Answer 7

 if( someDomElementWhichIsALink.href.indexOf(window.location) != -1 ) { // this is targeting your domain }