Rectangle 27 19

this information is outdated, now it is possible to do so i believe, since gmail and others now work via browser links. there is however the problem that you would only want it to open in a new tab if NOT opening in a system mail client, and open in a new tab if it is a webmail client, otherwise for example Outlook users see a blank tab appear, which is disorienting, espeically since they are Outlook users.

My awnser is based in your post, I just added the code. But you deserve the credit.

jquery - Open the href mailto link in new tab / window - Stack Overflo...

jquery razor href target mailto
Rectangle 27 11

So we can simply open a new window (Support older browser, new browsers just will open a new tab) and add a fallback (In case of non-javascript user) using preventDefault and default link redirection.

<a onClick="javascript:window.open('mailto:mail@domain.com', 'mail');event.preventDefault()" href="mailto:mail@domain.com">Send a e-mail</a>

Didn't work for me in Firefox 40.

the fiddle worked in FF43

jquery - Open the href mailto link in new tab / window - Stack Overflo...

jquery razor href target mailto
Rectangle 27 6

mailto calls the users default email client. It does not open a window or tab in any instance. If you want to use a window or tab you need to configure a form and allow the form to open in your window/tab. Of course, you'll have to configure the form to send mail with whatever method is available on your server.

This may have been true in 2011, but it is not true anymore. You can open mail clients such as Gmail in a new tab using target="_blank". Unfortunately, that is not sufficient since it will launch a blank tab for folks using stand alone clients.

And how do you open Outlook (the most popular email client) in a tab? It's always been possible open web-based email services in a window or tab. But web-based email services are not the majority of email clients.

@MattMacLeod the #1 email client in use is Outlook. As stated, while you certainly can set a link to open a new tab or window... that will not work with the #1 client today. This answer is not outdated.

@scott "mailto calls the users default email client. It does not open a window or tab in any instance." Is that part outdated?

jquery - Open the href mailto link in new tab / window - Stack Overflo...

jquery razor href target mailto
Rectangle 27 9

You don't need Javascript/Jquery for this. A standard link works (except Firefox v30+ due to a bug, see below).

<a href="mailto:example@example.com" target="_blank">

As of Firefox 30, does not work in Firefox due to a bug. It opens in the same tab AND replaces history so hitting back will not bring you back to the page where the mailto: link was.

This is correct. I am trying to find a solution. _blank does exactly what Costa says. How can we circumvent and open the gmail page in a new tab or possibly a pop up javascript window?

Just for the history it is 8 months later and the bug still exists.

2016 update: bug is still not fixed. Was originally opened in 2011 so doubtful this will be fixed unless the bug gets a ton of upvotes (hint, hint): bugzilla.mozilla.org/show_bug.cgi?id=646552

2017 update: bug is still not fixed. I will most likely never be fixed without lots of upvotes: bugzilla.mozilla.org/show_bug.cgi?id=646552

jquery - Open the href mailto link in new tab / window - Stack Overflo...

jquery razor href target mailto
Rectangle 27 187

It shouldn't be your call to decide whether the link should open in a new tab or a new window, since ultimately this choice should be done by the settings of the user's browser. Some people like tabs; some like new windows.

Using _blank will tell the browser to use a new tab/window, depending on the user's browser configuration and how they click on the link (e.g. middle click, Ctrl+click, or normal click).

I have to agree fully with taking away the decision from the user or browser. The user will have a preference which they are accustomed to and this removes their right to their preference. However, that being said... there are times that this is needed. (print dialogs, etc)

Although I feel this is true in many cases, for less technical users, I think (my opinion) that this simply is frequently not true. Some users may need this help or they risk the chance of not knowing how to get back to a page that they wanted left open. My two cents to try to put a little more of a user experience perspective on things.

I would agree with the "shouldn't" for websites, but remember that not all HTML is written for websites. I was thinking of something for an in-house web-app where it would be nice make some links open in new tabs without teaching everyone in the office how to ctrl+click.

While I mostly agree with @gotson on traditional websites... it is becoming the case that for webapps you may not want external links killing your app. A good case is the new chrome web app promotion feature... where users are provided a chromeless app launcher. In that case, going to external links and navigating the external website will require many back button presses to go back to the app.

html - Open link in new tab or window - Stack Overflow

html tabs hyperlink window href
Rectangle 27 187

It shouldn't be your call to decide whether the link should open in a new tab or a new window, since ultimately this choice should be done by the settings of the user's browser. Some people like tabs; some like new windows.

Using _blank will tell the browser to use a new tab/window, depending on the user's browser configuration and how they click on the link (e.g. middle click, Ctrl+click, or normal click).

I have to agree fully with taking away the decision from the user or browser. The user will have a preference which they are accustomed to and this removes their right to their preference. However, that being said... there are times that this is needed. (print dialogs, etc)

Although I feel this is true in many cases, for less technical users, I think (my opinion) that this simply is frequently not true. Some users may need this help or they risk the chance of not knowing how to get back to a page that they wanted left open. My two cents to try to put a little more of a user experience perspective on things.

I would agree with the "shouldn't" for websites, but remember that not all HTML is written for websites. I was thinking of something for an in-house web-app where it would be nice make some links open in new tabs without teaching everyone in the office how to ctrl+click.

While I mostly agree with @gotson on traditional websites... it is becoming the case that for webapps you may not want external links killing your app. A good case is the new chrome web app promotion feature... where users are provided a chromeless app launcher. In that case, going to external links and navigating the external website will require many back button presses to go back to the app.

html - Open link in new tab or window - Stack Overflow

html tabs hyperlink window href
Rectangle 27 1180

You should add the target attribute in the anchor tag with the value _blank.

<a target="_blank" href="http://your_url_here.html">Link</a>

there is no _tab... there is _new and _blank

_blank is handled on a vendor basis. Most modern browsers will, by default, open in a new tab. Older browsers, such as the IE hoard, will open in a new window - either because they don't have a tabbed feature, or because their default behaviour is a new window.

When not using a special name, as specified in links above, target is the name of the window (or "frame") you're targeting. If you set it to _tab or _new then it opens a window with that name. If a user clicks that link, goes back to your initial page and clicks another link with the same target, the tab/window opened the first time should have the content loaded into it.

A tip: be aware of vulnerability due _blank. More info medium.com/@jitbit/

html - Open link in new tab or window - Stack Overflow

html tabs hyperlink window href
Rectangle 27 1187

You should add the target attribute in the anchor tag with the value _blank.

<a target="_blank" href="http://your_url_here.html">Link</a>

there is no _tab... there is _new and _blank

_blank is handled on a vendor basis. Most modern browsers will, by default, open in a new tab. Older browsers, such as the IE hoard, will open in a new window - either because they don't have a tabbed feature, or because their default behaviour is a new window.

When not using a special name, as specified in links above, target is the name of the window (or "frame") you're targeting. If you set it to _tab or _new then it opens a window with that name. If a user clicks that link, goes back to your initial page and clicks another link with the same target, the tab/window opened the first time should have the content loaded into it.

A tip: be aware of vulnerability due _blank. More info medium.com/@jitbit/

html - Open link in new tab or window - Stack Overflow

html tabs hyperlink window href
Rectangle 27 33

target
<a>
"_tab"

EDIT2: From what I've figured out from the comments. setting target to _blank will take you to a new tab or window (depending on your browser settings). Typing anything except one of the ones below will create a new tab group (I'm not sure how these work):

_blank  Opens the linked document in a new window or tab
_self   Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top    Opens the linked document in the full body of the window
framename   Opens the linked document in a named frame

you mean _blank or _new...from what i know there is no _tab

W3Schools is NOT the W3C. See w3fools.com

@Jacedc You can use anything there instead of _tab. It creates a window-group.

Not everything at W3Schools is incorrect. But before you said the W3C (The World Wide Web Consortium), and then linked to W3Schools, which has no relation to the W3C or creating the web standards whatsoever. But I see you edited it. :)

html - Open link in new tab or window - Stack Overflow

html tabs hyperlink window href
Rectangle 27 34

target
<a>
"_tab"

EDIT2: From what I've figured out from the comments. setting target to _blank will take you to a new tab or window (depending on your browser settings). Typing anything except one of the ones below will create a new tab group (I'm not sure how these work):

_blank  Opens the linked document in a new window or tab
_self   Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top    Opens the linked document in the full body of the window
framename   Opens the linked document in a named frame

you mean _blank or _new...from what i know there is no _tab

W3Schools is NOT the W3C. See w3fools.com

@Jacedc You can use anything there instead of _tab. It creates a window-group.

Not everything at W3Schools is incorrect. But before you said the W3C (The World Wide Web Consortium), and then linked to W3Schools, which has no relation to the W3C or creating the web standards whatsoever. But I see you edited it. :)

html - Open link in new tab or window - Stack Overflow

html tabs hyperlink window href
Rectangle 27 21

You can simply do that with setting target="_blank" for an example check this

html - Open link in new tab or window - Stack Overflow

html tabs hyperlink window href
Rectangle 27 21

You can simply do that with setting target="_blank" for an example check this

html - Open link in new tab or window - Stack Overflow

html tabs hyperlink window href
Rectangle 27 7

<a href="newpage.htm" target="_blank">Click me to open in a new tab/window</a>

Load the linked document into a new blank window. This window is not named.

If there is no existing window or frame with the same name as specified in the target, a new window is opened with a name equal to the value of the target.

Its the setting in a browser that determines whether to open the page in a new tab or in a new window.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - How can I open a new tab or window when a link is clicked...

javascript html href
Rectangle 27 1

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>

I'm not trying to just open /some_local_page in a new window. I want to open /some_local_page in the current window and "example.com in another tab/window if the user command/control clicks on the link.

@Downvoter - Can you leave the reason also for -1?

jquery - Javascript link with the ability to open in new tab/window - ...

javascript jquery html
Rectangle 27 64

target-new: window | tab | none;

Update [2016]: this method never made it into the CSS3 spec, as one of the comments indicates. This shouldn't be used. However, it can be seen that most modern browsers open target='_blank' links in a new tab anyway, unless one attempts to resize the new tab immediately thereafter. However, there does not appear to be a mechanism to force this behavior in the specifications.

[2011] For a method of forcing opening in a new tab that is well supported, try the following:

<a href="some url" target="_newtab">content of the anchor</a>

Else, use this method to resize window immediately, to ensure that popup blockers do not kill your popup

not sure i understand how to use it

@Erik It will be a while before these browsers start supporting that. For now, all you can do is change the about:config in firefox, to force that behavior.

This supposedly works in firefox <a href="some url" target="_newtab">content of the anchor</a>

As i said in the main message, when using <a href=...> it works as a charm and the link is opened in a new tab.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - How can I open a link in new tab (and not new window)? - ...

javascript html
Rectangle 27 64

target-new: window | tab | none;

Update [2016]: this method never made it into the CSS3 spec, as one of the comments indicates. This shouldn't be used. However, it can be seen that most modern browsers open target='_blank' links in a new tab anyway, unless one attempts to resize the new tab immediately thereafter. However, there does not appear to be a mechanism to force this behavior in the specifications.

[2011] For a method of forcing opening in a new tab that is well supported, try the following:

<a href="some url" target="_newtab">content of the anchor</a>

Else, use this method to resize window immediately, to ensure that popup blockers do not kill your popup

not sure i understand how to use it

@Erik It will be a while before these browsers start supporting that. For now, all you can do is change the about:config in firefox, to force that behavior.

This supposedly works in firefox <a href="some url" target="_newtab">content of the anchor</a>

As i said in the main message, when using <a href=...> it works as a charm and the link is opened in a new tab.

javascript - How can I open a link in new tab (and not new window)? - ...

javascript html
Rectangle 27 7

<a href="http://example.com" onclick="window.open('/some_local_page')">Foo!</a>
<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
});

For the first one, that is definitely not the behavior I'm looking for. If you click on the link you get a new tab to /some_local_page and the current page goes to "example.com If you command/ctrl click it opens both in new windows.

@Nik: What is the behavior you want?

See the post edit for a clarification. The gist is that onclick should make an action on the current page, but the href should be able to be opened in another tab if the user command/control/center clicks.

The only thing that needs to change is that we also need to check the metaKey. so it becomes: (e.button === 0 && !(e.ctrlKey || e.metaKey))

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

jquery - Javascript link with the ability to open in new tab/window - ...

javascript jquery html
Rectangle 27 1115

If you can have an actual URL that makes sense use that as the HREF. The onclick won't fire if someone middle-clicks on your link to open a new tab or if they have JavaScript disabled.

If that is not possible, then you should at least inject the anchor tag into the document with JavaScript and the appropriate click event handlers.

I realize this isn't always possible, but in my opinion it should be striven for in developing any public website.

Check out Unobtrusive JavaScript and Progressive enhancement (both Wikipedia).

Can you give an example of how one might "inject the anchor tag into the document with JavaScript and the appropriate click event handlers"?

Why inject the anchor tag at all if it is merely meant to be used to allow an element to be a) clicked b) display the "pointer" cursor. It seems irrelevant to even inject an anchor tag in this scenario.

+1 for neither, but there are over approaches. Fact remains use of either javascript: or # are both bad practices and not to be encouraged. Nice articles btw.

@crush: I wouldn't use a div or span either; frankly, this seems like the very thing <button> was made for. But agreed: it probably shouldn't be specifically an <a> if there's no suitable place for it to link to.

@cHao Button is perhaps the best choice. I suppose the main point is that the HTML element shouldn't be selected based on its default presentation appearance, but rather its significance to the structure of the document.

html - Which "href" value should I use for JavaScript links, "#" or "j...

javascript html performance optimization href
Rectangle 27 1114

If you can have an actual URL that makes sense use that as the HREF. The onclick won't fire if someone middle-clicks on your link to open a new tab or if they have JavaScript disabled.

If that is not possible, then you should at least inject the anchor tag into the document with JavaScript and the appropriate click event handlers.

I realize this isn't always possible, but in my opinion it should be striven for in developing any public website.

Check out Unobtrusive JavaScript and Progressive enhancement (both Wikipedia).

Can you give an example of how one might "inject the anchor tag into the document with JavaScript and the appropriate click event handlers"?

Why inject the anchor tag at all if it is merely meant to be used to allow an element to be a) clicked b) display the "pointer" cursor. It seems irrelevant to even inject an anchor tag in this scenario.

+1 for neither, but there are over approaches. Fact remains use of either javascript: or # are both bad practices and not to be encouraged. Nice articles btw.

@crush: I wouldn't use a div or span either; frankly, this seems like the very thing <button> was made for. But agreed: it probably shouldn't be specifically an <a> if there's no suitable place for it to link to.

@cHao Button is perhaps the best choice. I suppose the main point is that the HTML element shouldn't be selected based on its default presentation appearance, but rather its significance to the structure of the document.

html - Which "href" value should I use for JavaScript links, "#" or "j...

javascript html performance optimization href
Rectangle 27 1114

If you can have an actual URL that makes sense use that as the HREF. The onclick won't fire if someone middle-clicks on your link to open a new tab or if they have JavaScript disabled.

If that is not possible, then you should at least inject the anchor tag into the document with JavaScript and the appropriate click event handlers.

I realize this isn't always possible, but in my opinion it should be striven for in developing any public website.

Check out Unobtrusive JavaScript and Progressive enhancement (both Wikipedia).

Can you give an example of how one might "inject the anchor tag into the document with JavaScript and the appropriate click event handlers"?

Why inject the anchor tag at all if it is merely meant to be used to allow an element to be a) clicked b) display the "pointer" cursor. It seems irrelevant to even inject an anchor tag in this scenario.

+1 for neither, but there are over approaches. Fact remains use of either javascript: or # are both bad practices and not to be encouraged. Nice articles btw.

@crush: I wouldn't use a div or span either; frankly, this seems like the very thing <button> was made for. But agreed: it probably shouldn't be specifically an <a> if there's no suitable place for it to link to.

@cHao Button is perhaps the best choice. I suppose the main point is that the HTML element shouldn't be selected based on its default presentation appearance, but rather its significance to the structure of the document.

html - Which "href" value should I use for JavaScript links, "#" or "j...

javascript html performance optimization href