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'));
}
}
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).
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:
Link
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.
Related
On my site, I have a div container, which contains a <input>, and a <a onclick="DoSomeStuff();" href="#" target="_blank"> element, which acts as a button. Now, DoSomeStuff(); modifies the href attribute based on the value of the input element.
I need to emulate click on this anchor tag after user pressed enter on an input element. I know how to detect this enter, but I don't know how to click this anchor. jQuery's .click() is not working in here, it only fires onclick() of the anchor tag, but does not actually click the anchor.
Edit: Here is an example on what I want to do: http://jsfiddle.net/JZYWZ/. It triggers the onclick event of the anchor tag, but does not follow the link in new tab.
Browsers are very strict about opening links in new tabs/windows through javascript.
If they allowed you to have javascript click and open a new tab when the user presses enter (for what you know to be legitimate reasons), that feature could be abused by spammers to have javascript click ads and spam links when the user does anything. Sadly there's no way the browser can tell your linked page is legitimate and not spam or monetised clickbait.
Pretty much the only option to open the url in new tab using javascript is window.open which you've already tried: the browser will always look to the user's settings on popup blocking and on whether to open in tabs or windows - and the default settings are strict, particularly in Firefox and Internet Explorer (less so in Chrome and Safari).
A possible alternate approach where you won't be fighting the browser's anti-spam defences is to open the content in a modal overlay (iframe-based if you need multiple pages). Here's one example library.
It'll be similar from a UI point of view - giving the user related content in a form where they can just close it and return to the main page when they're done with it.
Modal overlays are widely used and likely to be familiar with users. For example, they're now pretty standard for sharing pages, logins and other pieces of simple interaction or side content. Example:
EDIT
After some additional testing....
$('input[type="text"]').on('keyup', function(event){
if(event.keyCode === 13){
DoSomeStuff();
window.open($('a').attr('href'));
}
});
I want a link that submits some POST data. This works:
Bar
However, if I middle-click (Google Chrome: open link in new tab) on links that are formed like that, the page doesn't open in a new tab; rather, the link gets followed in the current tab. This isn't nice and it's unexpected behavior to boot (one expects middle-clicking would work on this link just like on any other).
How do I make this link act more like an actual link, particularly, by making this middle-click behavior work as usual?
You'll probably have to handle that logic in the onclick event manually, by detecting what button is pressed and then behaving accordingly.
I have an aspx page on my SharePoint site, which I have included tags. For some reason, every button on the page will reload the page when clicked. Even the buttons with no attributes (id, class, etc) or functions will reload the page when clicked. How can I fix this issue? I can't even see what's going on in the debugger because I'm not calling any reload functions, so I have no idea where to place a breakpoint.
Thank you in advance for your help, I really appreciate it.
The problem here is with the <button> tag. Its default behavior is to act as a submit button unless otherwise declared and will reload.
To keep your <button> tag, add type='button' to the button element. I think that prevents the reload.
Or you could go with the ole <input> tag with a type='button'. That keeps the reload from happening as well.
Or some other html element with an onclick event will work too.
First search for a function called doPostback and set a breakpoint on the entry point and click a button. If you hit this breakpoint it could mean that auto post back is turned on for the control generating the button. However if you trigger that breakpoint you should be able to look at the stack trace to figure out how you got there.
If that doesn't work, use the F12 tools in the browser, start with the HTML section and search (Ctrl-F) for the word "click". Then go to the script tab and do the same for each JavaScript file. If all of the buttons exhibit the behavior there is most likely a click event registered. Possibly with jQuery that looks like this $('button') so that it matches all buttons on the page and registers a click handler.
If that doesn't find it, and you have access download one of the master pages from http://startermasterpages.codeplex.com/ and temporarily replace your master page with one of these. Take a screenshot of the scripts that are loading on your page first. Then add them to the starter master page one at a time until the unwanted behavior returns. Then set a breakpoint on every function entry point in that script and click a button and see where you land.
I've got a browser plug-in I'm working on and I want it to behave a certain way when the user clicks things. Not limited to, but including, a behavior for links!
The problem is that the plug-in has to work for a wide variety of sites, and some of those sites use the dreaded pseudo-protocol such as:
Show Element
Currently my behavior is added to the anchor tag via
anchor.addEventListener('click', superAwesomeFunction);
Unfortunately this has a problem where the click listener only fires once. If I preventDefault() of course the click listener sticks around, but I've now broken the host site! Otherwise, clicking the link fires the click listener but only on the first click. I'm wondering why my superAwesomeFunction() doesn't fire again if the link is clicked a second time. Is href="javascript:things()" doing more than I know?
It is possible to add an event listener to a link that has a JavaScript function call set in the href attribute.
Here's a jsFiddle that shows it working. Both functions fire each time the link is clicked.
There must be something else going on with your code beyond what we can see in what you gave us.
If you must wait user some time and going on url then, you may add some code to your superAwesomeFunction's process end:
document.location.href = $(this).attr("href");
Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.
A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)
At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.
I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}
If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.