CODEWITHSUNDEEP
javascriptjquerybrowser
Pavan Dittakavi
Pavan Dittakavi

Reputation: 3181

How do browsers display the target url of a link

If you do a google search for some string , the browser would render the search results in the form of clickable links. Now here comes my question. If one hovers on those links, at the bottom left hand side, you would be able to see the location where the browser would take you if you hit it. I want to know how the browser does it.

I dont think that search results are actually HTML based anchor tags. Atleast that's what I feel. But even in those cases, the target url gets displayed whenever we hover over the links.

Please share your thoughts on how its done..i need to do the same in a js code.

-->Thanks for your answers. There is a reason why I had to ask this. I have to enable drag and drop between a web page which i am gonna show in an SWT Browser and a java GUI. In order to do that, in the mousedown event, i am firing a javascript code. This basically gets the HREF attribute on the anchor element which the user has clicked. **Now here is the catch. If I open google.com and if I do a mouse down IMAGE,YOUTUBE,GMAIL,DRIVE links the target URL is coming up fine. But if i try to do a mouse down on any of the results in google search OR in our original thin client application which we need to enable for drag and drop, the link is not coming up. However, the browser at the bottom shows the target link. I am confused. This is the reason why I think it is not an anchor tag.

I tried by registering an onmousedown with the following code for all the anchor elements. But with this if the user does a mousedown on any of the search result...no alert box was coming up.

var elements = document.getElementsByTagName('a');
for(var i=0;i<elements.length;i++)
{
    elements[i].onmousedown = function()
    { 
          alert(this.getAttribute('href'));
    }
}

Upvotes: 1

Views: 3494

Answers (4)

apsillers
apsillers

Reputation: 115960

If you look at the source code of a Google search page, you'll see the links have format

<a onmousedown="return rwt(...)" href="http://somelink.com/somepath/">...</a>
  • Initially, the href property of the link is correct, so it shows up correctly on hover.
  • However, it gets mutated at click-time by Google's rwt function, which changes the href property to a http://www.google.com/url?... URL.
  • This mutation happens when the mouse is pressed down -- just before the browser follows the link (which happens when the button is released up).

You can observe this behavior easily by right-clicking on a result link and seeing the URL change on click.

Upvotes: 2

Quentin
Quentin

Reputation: 943902

I dont think that search results are actually HTML based anchor tags. Atleast that's what I feel.

You feel wrong. Search results are <a> elements.

But even in those cases, the target url gets displayed whenever we hover over the links.

The browser has to know where the link goes. It can make its UI do pretty much anything it likes.

Please share your thoughts on how its done..

With native code

i need to do the same in a js code.

window.status = element.href in a mouseover event.

Some browsers will block this these days as it is too useful a technique for a phishing attack (to trick the user into going somewhere other than where they expect to go).

Upvotes: 3

RanSch
RanSch

Reputation: 469

You can change the status bar this way: The href is the text in the status bar and when the user clicks the link it is changed to the real url:

    <a href="status bar" onmousedown="this.href='real page';">Link</a>

Upvotes: 2

Akshay
Akshay

Reputation: 3198

Search engine results, at least from google, are rendered as html anchor tags. No need to guess check the html source of the search page.

So the part about showing the link in the status bar on hover, that is standard behavior (I see a url to your SO profile when I hover on your name).

I'm going to take a leap and assume what you want to figure out, is how to render a link as anchor tag, but still do some javascripty stuff, instead of the default anchor tag behavior. Like how google attaches tracking information to the url instead of just open the search result url in a tab.

To do that, you need to attach an event handler to the anchor tag to capture the ''click'' event, prevent propagation of the real click event, and do your stuff instead. So the HTML looks like an anchor tag, but when you click it, its all your javascript.

You'll find a lot of references to do this on questions like jQuery: Capture anchor href onclick and submit asynchronously or just basic google search on how to trap anchor click / href event.

Hope this helps.

Upvotes: 2

Related Questions