Question

I’m trying to get a link that will both open in the current page, or when command/ctrl clicked (etc.) will open in a new tab/window based on the users settings. Right now I’m using something like this:

<a href='http://example.com' onclick="setTimeout(function() {window.location='/some_local_page'}, 10); return false;">Foo!</a>

This allows me to click on the link and have it open the local page, but I have to explicitly right click and choose open in new tab/window. I’m pretty sure this is a solved problem, but I can’t find the right combination of google/stackoverflow keywords. 🙂

This might help for clarification:

<a href='http://example.com' onclick="some_javascript_function(); return false;">Foo!</a>

In this case a click should call some_javascript_function() and a command/ctrl click should open “http://example.com” in a new tab/window and do nothing to the current page.

Answer 1

Is this what you want?

<a href="http://example.com" onclick="window.open('/some_local_page')">Foo!</a>

Or this?

<a href="/some_local_page" target="_blank">Foo!</a>

EDIT: The onclick will fire when the center or left button is clicked (but not the right button).

So, in the onclick, you need to detect if ctrl was pressed, or if it was the middle button.

I also suggest not putting JavaScript inline. Try this:

<a href="http://example.com" class="link" data-link="/some_local_page">Foo!</a>​

$('a.link').click(function(e){
    if(e.button === 0 && !e.ctrlKey){ // Click without ctrl
        e.preventDefault();
        // open local page
        window.location = $(this).data('link');
    }
    // Middle click and ctrl click will do nothing,
    // thus allowing the brower to open in a new window
});​

DEMO: http://jsfiddle.net/E8hEt/