How to hide actual URL in the status bar of all browsers?

Yesterday, Jacob mailed me and asked me how can I show different text or link in the status bar of browsers like Firefox or safari when mouse is over the link.He found the technique which only worked for IE but not for other browser but I’ve come up with a technique which works for all browser. This kind of technique is quite useful if you want to hide the actual link in status bar of browsers and show the different URL instead of actual one.

Old technique to display hide actual URL  in the status bar

If you search in google with the keyword change status bar text , you’ll find that many codes in different websites which are using window.status to change the text of the status bar while mouse is over the link. For example,

<a href="http://www.sell.com/?referrer=225" onMouseOver="window.status='http://www.sell.com';
return true" onMouseOut="window.status=''">Click here </a>

The above link displays “http://www.sell.com” instead of “http://www.sell.com/?referrer=225” in the status bar when mouse is mover the hyperlink. But, the main drawback of above code is that it only works in Internet Explorer(IE) . It doesn’t change the status bar text of the link in any other browsers like “Firefox”, “Safari” etc.

How to display diferent URL of links in status bar of Firefox , Safari etc ?

To change the satus bar text of the the link in firefox and safari you’ve to just use a small technique with the help of “href” and “Onclick” attribute of the hyperlink. Let’s look at the this technique step by step,

  1. First, make a javaScript function and define it exactly as below,
        <script language="javascript" type="text/javascript">
         function redirect(URL)
         {
           document.location=URL;
           return false;
         }
        </script>
  2. Now, define the hyperlink with the status bar text in href attribute and call the above function from onClick attribute of the link like below,
    <a href="http://www.sell.com" onclick="return
    redirect('http://www.sell.com/?referrer=225');">Click here</a>

As we know the we see the text in status bar which is defined in the href attribute of the hyperlink. And when you click the link, code within onclick event of element is called. We’ve taken the benefit of this phenomenon to show the different text .

But remember, this technique also have a drawback as it doesn’t work if JavaScript is diabled in the web browsers. In that case, the browers will be redirecteed to URL in the href attribute. If you worried about disabled JavaScript then you can check this post to knnow how to handle disabled JavaScript in browser.

27 thoughts on “How to hide actual URL in the status bar of all browsers?

  1. this is a smart trick 😉 nice post!

  2. Thanks stratosg….

  3. I have written a post on the multiple methods to Hide the Target URL of a Link in Status Bar

  4. @Binny V A – Thanks for sharing the link and technique

  5. Nice trick! It gives me an idea of doing a onmouserover event that will change the status bar text using string function that strip the other part that doesn’t want to be shown? Much easier to implement to all links ins’t?

  6. Ali

    but i want to do the same upon any form, i mean when the user rollovers the submit button it should not show the redirected page’s address and after the submission of form it should not display the link of that page in the address bar…can you help me???…plzzzzzzzzzzzzz

  7. This is a genius idea. It’s so simple, yet it works. JavaScript is such a handy vice in hacking away at all browsers. Sickens me to see that people complain about people disabling Javascript. What’s the point in disabling it considering that most sites use it these days?

  8. I believe href=” ” or “#” with a onclick works aswell,

    thanks for this though, its much cleaner

  9. @Tarquin – yes you can do that but it doesn’t show the different URL or fake URL you can just see the ‘#’ in the status bar

  10. Yea fair enough, this script is especially useful for click trackers, most definatly going to use it.

    Again thanks :)

  11. Joe

    This does NOT WORK, the link still shows up in firefox, what am i missing here

  12. Joseph

    Hi my brothers
    Is there a way to do this via CSS?

  13. I tried placing this code in a post on my blog and while the status bar url rendered nicely, it didn’t redirect to the desired URL destination. Can you imagine what might have happened? Does it work in WordPress?

  14. John

    This is not working for me. It is just sending people to the href, not to the redirect: Checked javascript and correctness of link, but when reviewing the referrer (redirected) hits nothing is registering.

  15. Hey, thanks for this. I was looking for this code!

  16. Raj

    Hi..This piece of information is very useful…Could you please let me know how to hide URL in address bar. In which ever page the user is currently in, it should show the default page address in URL.

  17. This is a great piece of code! I have been using the old method for a while now. Thanks Binny also, you have wrote up an excellent codes as well.

  18. its not working with firefox 3.0 :-/

  19. This is what I have been searching for. Thanks

  20. 😀
    its not working with firefox 3.5

  21. Thanks for sharing… :)

  22. chat2learn

    hi,

    a nice solution about this issue is posted here

    http://www.php24hours.com/how-to-hide-url-in-status-bar-t160.html

  23. Rajeshkumar

    Hi Roshan,
    Ur posts are Fantastic and it helped alot to me.

    Thanks Roshan

  24. It works for me .. Thank’s

  25. This is such a nice solution i will be adding this into core as a supported option in my CMS framework solution. Thank you.

  26. Ndi Rustandi

    worth it,,, this trick…

Leave a Reply

Your email address will not be published. Required fields are marked *

*