If you do a google search for some string , the browser would render the search results in the form of clickable links. Now here es 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 and if I do a mouse down IMAGE,YOUTUBE,GMAIL,DRIVE links the target URL is ing 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 ing 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 ing up.
var elements = document.getElementsByTagName('a');
for(var i=0;i<elements.length;i++)
{
elements[i].onmousedown = function()
{
alert(this.getAttribute('href'));
}
}
If you do a google search for some string , the browser would render the search results in the form of clickable links. Now here es 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. and if I do a mouse down IMAGE,YOUTUBE,GMAIL,DRIVE links the target URL is ing 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 ing 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 ing up.
var elements = document.getElementsByTagName('a');
for(var i=0;i<elements.length;i++)
{
elements[i].onmousedown = function()
{
alert(this.getAttribute('href'));
}
}
Share
Improve this question
edited May 13, 2013 at 15:27
Pavan Dittakavi
asked May 13, 2013 at 14:16
Pavan DittakaviPavan Dittakavi
3,1816 gold badges31 silver badges54 bronze badges
5
-
window.status
... at least IE's of old worked like that – Elias Van Ootegem Commented May 13, 2013 at 14:17 - Did you look at the source code or the developer tools? – SLaks Commented May 13, 2013 at 14:17
- I have heard google has a javascript on their sites that explicitely displays the target url, when you move the mouse over a link – BeniBela Commented May 13, 2013 at 14:18
- It is just a regular link. Have a look at the source code yourself. – Reinstate Monica Cellio Commented May 13, 2013 at 14:24
- do you mean like this?:jsfiddle/73FhL/1 – user359135 Commented May 13, 2013 at 14:25
4 Answers
Reset to default 3I 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).
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.
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>
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./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 thehref
property to ahttp://www.google./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.