Hide the Target URL of a Link in Status Bar

There are some instances where you have redirect the user through one page to get them to another page. There is a way to do this stealthily - without letting the user know that there was a redirect. Yes - it sounds evil - but it don't have to be. Say you have a click tracking software - you have to track each click the users make. To do that you need a redirecting page what will track the clicks. Hopefully, the following illustration will make things clearer...

You don't want the user to see that you are passing through the middle page. Usually, the URL will flash in the address bar for just a second(or less) - so we don't have to worry about that. We just have to prevent the URL from appearing in the status bar when the user hovers over the link.

There are three methods to do this...

• Change the status text.
• Hijack and stop the click event and redirect page.
• Make an Ajax call on click event.

Changing Status Text

This is the old method. This uses the window.status property to show a different URL to the user. Simple and easy method - but it rarely works now a days. This method has been abused by malicious sites a lot - so most browsers have disable this option. In Firefox, you can find that option at Tools -> Preferences -> Content -> Enable Javascript(click on the 'Advanced' Button) -> Change status bar text. If that's checked, you can use window.status to change the status bar text. But its disabled by default.

But if you still want to use this method(not recommended), this is how to do it...

<a href="click_counter.php?redirect_to=http://www.google.com/" 
	onmouseover="window.status='http://www.google.com/';return true;" 
	onmouseout="window.status='';">Go To Google</a>

Hijacking Click Event

In this method, when the user clicks on the link, the script captures the click event and stops it. This will prevent the browser from opening up the target page. Then we use location.href to go to the new page. Sample code below...

HTML Code

<a href="http://www.google.com/" id="google-link">Go To Google</a>

Javascript Code

<script type="text/javascript">
function init()  {
	document.getElementById("google-link").onclick=function(e) {
		e=e||window.event;
		stopEvent(e);
		location.href="click_counter.php?redirect_to=http://www.google.com/";
		return false;
	}
}
window.onload=init;
</script>

Ajax Method

This is for all you web 2.0 fans. Ajax method simply makes a call to the counter server side script on the click event. This is perhaps the best method of all - as the counter URL doesn't appear at all. Needless to say, the server side script used here will be different from the one used in the other methods - there is no redirection here. The code is very simple as well...

HTML Code

<a href="http://www.google.com/" id="google-link">Go To Google</a>

Javascript Code

<script type="text/javascript">
function init()  {
	document.getElementById("google-link").onclick=function(e) {
		jx("counter.php?url="+escape("http://www.google.com/")); //Use your favorite ajax library here.
	}
}
window.onload=init;
</script>

Hide the Target URL of a Link in Status Bar

Popular Pages

• Handling Keyboard Shortcuts in JavaScript
  
• UED(Url Encoded Data) - Format for Sending Data to the Server Side
  
• New JavaScript Library
  
• Ajax File Upload
  
• Ajax Data Transfer Methods - XMLHttpRequest Alternatives
  
• Using POST method in XMLHTTPRequest(Ajax)
  
• AHAH(Asynchronous HTML over HTTP)
  
• Hide the Target URL of a Link in Status Bar
  
• Ajax File Upload Response Handling
  
• dump() - Javascript equivalent of PHP's print_r() function
  

OpenJS

• About
• Ajax
• Articles
• Scripts
• Sitemap