jquery - Javascript link with the ability to open in new tabwindow - Stack Overflow

admin管理员组

文章数量:1325714

I'm trying to get a link that will both open in the current page, or when mand/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='' 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 bination of google/stackoverflow keywords. :)

This might help for clarification:

<a href='' onclick="some_javascript_function(); return false;">Foo!</a>

In this case a click should call some_javascript_function() and a mand/ctrl click should open "" in a new tab/window and do nothing to the current page.

I'm trying to get a link that will both open in the current page, or when mand/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.' 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 bination of google/stackoverflow keywords. :)

This might help for clarification:

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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 29, 2012 at 20:12 Nik asked Feb 29, 2012 at 19:18 NikNik 47233 silver badges1212 bronze badges 8

• 2 Why are you trying to do anything at all? This is already default behaviour in pretty much every browser. If you just don't return false, and don't use the window.location business, and don't override the default behaviour of the click (which you aren't), this should work automatically. – Alexander Corwin Commented Feb 29, 2012 at 19:25
• What are you trying to do? Why are you using setTimeout to redirect me to a pletely different page from the link I clicked on? I'm so confused. Which link do you want to open, and where do you want it to open? Your onclick has return false which stops the browser from following the link normally. – gen_Eric Commented Feb 29, 2012 at 19:27
• 1 Messing default browser behaviour almost always sounds like bad idea. – kirilloid Commented Feb 29, 2012 at 19:28
• the href to example. is a different location than /some_local_page – Nik Commented Feb 29, 2012 at 19:43
• 1 Normal click changes the current page to /some_local_page. ctrl+click opens example. in a new window (and does nothing to the current page). – Nik Commented Feb 29, 2012 at 20:09

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 7

Is this what you want?

<a href="http://example." 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." 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/E8hEt/

Why don't you render the same url in its href attribute if you want go to the same url?. And to open it in a new window set the target to _blank.

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

本文标签： jqueryJavascript link with the ability to open in new tabwindowStack Overflow