1

My browser (firefox) prevents any popup from loading, and loads links that open new windows in the current tab, unless I explicitly say I want the link to load on a new tab or window, with the appropriate shortcuts (for example, middle click on the link, or left click with ctrl pressed causes the link to open on a new tab, and shift + left click on a new window).

I would like to create a javascript function f() that runs some code (meant to create the link address) when the link is pressed, and then loads the link that has been created, without removing the user experience described above. Right now what I have is something like <a href="javascript:void(0)" onclick="f()"/>, but middle click doesn't work (it instead loads the url javascript:void(0)) and neither do the other features described above.

Do you have any idea as how to solve my problem ?

Thanks.

Eddy Freddy
  • 1,820
  • 1
  • 13
  • 18
SimonNN
  • 39
  • 1
  • 1
  • 5

2 Answers2

5

have you tried window.open('url')?

see: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

Also, as far as I know, you can't control whether or not the browser opens in a new tab or new window. That is a browser setting that is different for every user.

You might also try removing the onclick, and using <a href="javascript:f()"></a>

EDIT

There seems to be issues with using middle click with opening new tabs instead of executing the javascript: middle click (new tabs) and javascript links

As that site says, you can instead create an id for the element and bind it through javascript.

**Taken from that link:

<a href="/non/ajax/display/page" id="thisLink">...</a>

And then in your JS, hook the link via it's ID to do the AJAX call. Remember that you need to stop the click event from bubbling up. Most frameworks have an event killer built in that you can call (just look at its Event class).

Here's the event handling and event-killer in jquery:

$("#thisLink").click(function(ev, ob) {
    alert("thisLink was clicked");
    ev.stopPropagation();
});

Without jQuery, it might look like this:

document.getElementById('thisLink').onclick = function(e)
{
     //do someting
     e.stopPropagation();
}
Community
  • 1
  • 1
LordZardeck
  • 7,953
  • 19
  • 62
  • 119
  • Where would you want me to insert window.open('url') ? If it is inside the f() function, I don't think it would change the fact that middle clicking on the link opens a new tab whose url is 'javascript:void(0)'. I don't want to control anything beside my own browser. I am actually trying to create a greasemonkey script. href="javascript:f()" just causes the new tab to have a url of 'javascript:f()' when the link is middle clicked. – SimonNN Oct 23 '11 at 20:20
  • I just tried it even in the f() function. So try this and see if it works: Link Here f = function() { window.open('url'); } – LordZardeck Oct 23 '11 at 20:23
  • If I middle click on the link you described, it causes a new tab to open, whose url is javascript:f(). – SimonNN Oct 23 '11 at 20:28
  • Yeah, it looks like the only option you have is to bind the click even with javascript. I'll update my answer with details. – LordZardeck Oct 23 '11 at 20:31
  • Are you using a framework like jQuery? let me know what framework if yes, and let me know if not and I'll try to provide some code that matches what you are using. – LordZardeck Oct 23 '11 at 20:37
  • I have been trying a few things, but none worked so far. I am actually pretty much new to javascript and not familiar with jQuery. The remote site for which I am trying to create the small greasemonkey script doesn't seem to use jQuery. Instead of using $("#thisLink"), and given that my doesn't have an id nor a name, would it be possible to use the result of an xpath query with document.evaluate ? – SimonNN Oct 23 '11 at 21:08
  • I'm not familiar with xpath, but unless you can use classes, i'm not sure you can find it without an id or name. is there an example I can look at to better help? I also just found this page about xpath which might help: http://www.nczonline.net/blog/2009/03/17/xpath-in-javascript-part-1/ – LordZardeck Oct 23 '11 at 21:22
  • Sorry about the confusion with xpath, it's not my point. All I meant is that I don't know what the syntax $("#thisLink") means, and I was wondering if it was okay for me to access the node in a different way, provided that $("#thisLink") just means "return the node whose id is thisLink". So would getElementsByTagName('foo')[0].click(function(ev, ob) { f(); ev.stopPropagation();}); be okay for instance ? f() should be placed in the anonymous function in that spot, in the previous snippet, right ? – SimonNN Oct 23 '11 at 21:38
  • Before I make these changes to my code, are you confident that this click method is any different from and that the middle click will work ? – SimonNN Oct 23 '11 at 21:39
  • instead of .click it should be .onclick but it should work. the reason it will work is because of the stopPropagation function. that will keep it from doing what it normally does. – LordZardeck Oct 23 '11 at 21:42
  • Okay, I tried it. After using this .onclick=... statement, is firebug supposed to change the value of the onclick attribute of the a tag ? If so, it's not working. In any case, f() doesn't seem to be executed (the first line of f() is now a alert('hello')). – SimonNN Oct 23 '11 at 21:56
  • try placing a console.log('works') inside the function and left clicking first to see if you even got the function bound. then if if logs, then try middle-clicking – LordZardeck Oct 23 '11 at 21:58
  • If I write console.log(works) in my custom f() function, it does not log, and a left click just behaves with the default onclick of the page, meaning the overwrite of onclick didn't work. The code above document.getElementById('thisLink').onclick is executed, though. – SimonNN Oct 23 '11 at 22:03
  • I think the failure to execute onclick has to do with greasemonkey: [link](http://www.oreillynet.com/pub/a/network/2005/11/01/avoid-common-greasemonkey-pitfalls.html?page=3). But if I use addEventListener, I lose the ability to drop the event. Any way around that ? – SimonNN Oct 23 '11 at 22:36
  • So... I implemented the addEventListener solution. It works! My function is executed. I am not sure if the original function is still executed or not. I think it is, because the event wasn't dropped. Anyway, my problem unfortunately remains: a middle click on the link still brings a new tab whose url is javascript:void(0) – SimonNN Oct 23 '11 at 23:32
  • try binding an anonymous function instead of yours, like so: function(e){console.log(e); e.stopPropagation();} and see what output you get using the addEventListener solution – LordZardeck Oct 24 '11 at 00:09
  • I'm sorry, I'm lost. Who is 'e' ? What I have right now is node.addEventListener("click", function(){ f(a); }, false); (yeah in reality f() takes an argument, and a is defined in the scope of 'node'). I don't see how I can add a function that takes an event 'e' as an argument from there. – SimonNN Oct 24 '11 at 00:14
  • e is the var for an Event. it can be anything, including "event". it's just common practice for people to just use the letter e. You can get more information here: http://www.quirksmode.org/js/introevents.html#link10 – LordZardeck Oct 24 '11 at 00:18
  • Yes, thanks, but what I mean is where do you want me to add function(e)... inside node.addEventListener("click", function(){ f(a); }, false); ? (maybe you didn't see I edited my previous comment) – SimonNN Oct 24 '11 at 00:23
  • do this: node.addEventListener("click", function(e){console.log(e); e.stopPropagation(); }, false); – LordZardeck Oct 24 '11 at 00:24
  • Oh sorry now I understand. But isn't the second argument of addEventListener supposed to be a function with no argument ? Anyway, I tried it, and nothing happened (a left click on the link doesn't do anything, and a middle click still brings a new tab with a url of "javascript:void(0)"). I'm not familiar with console.log, is it the console that is brought up with ctrl shift J ? The message isn't there. However a alert("test") before console.log brings the dialog. – SimonNN Oct 24 '11 at 00:30
  • try using alert(e) instead. I'm trying to see if you are getting an event argument. is there a site that you are using that I can test this on? I'd be able to be more helpful. – LordZardeck Oct 24 '11 at 00:31
0

Other browsers may vary, but by default Firefox doesn't tell the web page that it has been middle-clicked (unless you set the hidden preference to enable the feature). You might be able to create a workaround based on the focus and/or mouseover events instead.

Neil
  • 54,642
  • 8
  • 60
  • 72
  • Does that mean that, using firefox, it's impossible to execute javascript code before loading a link, without breaking the user experience of the middle click ? What hidden preference are you talking about ? Unless I misunderstood your idea, mouseover or focus isn't what I'm looking for. – SimonNN Oct 23 '11 at 21:43
  • There's no way in Firefox to tell that the user has actually middle-clicked the link. My understanding was that you only needed the code to create the link address. I thought you could try running that code using a mouseover or focus event instead. – Neil Oct 24 '11 at 22:54