Make a link open a new window (not tab)
With pure HTML you can't influence this - every modern browser (= the user) has complete control over this behavior because it has been misused a lot in the past...
HTML option
You can open a new window (HTML4) or a new browsing context (HTML5). Browsing context in modern browsers is mostly "new tab" instead of "new window". You have no influence on that, and you can't "force" modern browsers to open a new window.
In order to do this, use the anchor element's attribute target
[1]. The value you are looking for is _blank
[2].
<a href="www.example.com/example.html" target="_blank">link text</a>
JavaScript option
Forcing a new window is possible via javascript - see Ievgen's excellent answer below for a javascript solution.
(!) However, be aware, that opening windows via javascript (if not done in the onclick event from an anchor element) are subject to getting blocked by popup blockers!
[1] This attribute dates back to the times when browsers did not have tabs and using framesets was state of the art. In the meantime, the functionality of this attribute has slightly changed (see MDN Docu)
[2] There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent
, _self
or _top
.
Open a URL in a new tab (and not a new window)
Nothing an author can do can choose to open in a new tab instead of a new window; it is a user preference. (Note that the default user preference in most browsers is for new tabs, so a trivial test on a browser where that preference hasn't been changed will not demonstrate this.)
CSS3 proposed target-new, but the specification was abandoned.
The reverse is not true; by specifying certain window features for the window in the third argument of window.open()
, you can trigger a new window when the preference is for tabs.
HTML: how to force links to open in a new tab, not new window
There is no way to do that as the author of the HTML that a browser renders. At least not yet that I know of. Its pretty much up to the browser and its settings / preferences that are set by users themselves.
Also, you shouldn't impose this upon any user. A browser is the user's property. If a user wants to open all links in tabs or in new windows, then let the user do exactly that.
It's good that we can't do certain things. target=_blank
is still abused and popups have been done to death.
How to open link in a new tab in HTML?
Set the target
attribute of the link to _blank
:
<a href="#" target="_blank" rel="noopener noreferrer">Link</a>
For other examples, see here: http://www.w3schools.com/tags/att_a_target.asp
Note
I previously suggested blank
instead of _blank
because, if used, it'll open a new tab and then use the same tab if the link is clicked again. However, this is only because, as GolezTrol pointed out, it refers to the name a of a frame/window, which would be set and used when the link is pressed again to open it in the same tab.
Security Consideration!
The rel="noopener noreferrer"
is to prevent the newly opened tab from being able to modify the original tab maliciously. For more information about this vulnerability read the following articles:
- The target="_blank" vulnerability by example
- External Links using target='_blank'
How to open an URL in a new tab not in a new window
This may help.
<div onclick="OpenNewTab('http://www.stackoverflow.com');">Click here to Open New Tab</div>
function OpenNewTab(url) {
var newwindow = window.open(url, '_blank');
newwindow .focus();
}
Working Fiddle
Open link in new window , not in new tab
Try like
<li onclick="window.open('http://www.google.com','mywindow','height:400;width:400;')">Demo</li>
Open link in new tab or window
You should add the target="_blank"
and rel="noopener noreferrer"
in the anchor tag.
For example:
<a target="_blank" rel="noopener noreferrer" href="http://your_url_here.html">Link</a>
Adding rel="noopener noreferrer"
is not mandatory, but it's a recommended security measure. More information can be found in the links below.
Source:
- MDN | HTML element
<a>
| attributetarget
- About rel=noopener
- Opens External Anchors Using rel="noopener"
Related Topics
Getelementbyid() Returns Null Even Though the Element Exists
Intercept a Form Submit in JavaScript and Prevent Normal Submission
Add Content to a New Open Window
Limit Number of Lines in Textarea and Display Line Count Using Jquery
How to Simulate a Mouseover in Pure JavaScript That Activates the CSS ":Hover"
How to Edit a CSS Variable Using Js
Disable Drag and Drop on HTML Elements
How to Correctly Detect Orientation Change Using Phonegap on Ios
Why Does Date.Parse Give Incorrect Results
How to Use Sockets in JavaScript\Html
Does Schema.Org Markup Work If Markup Is Dynamically Built With JavaScript
How to Get Query String Value from Script Path
Toggle Show/Hide Div With Button
Select All Elements That Have a Specific Css, Using Jquery
Combine and Minify Multiple Css/Js Files
How to Invoke Objective-C Method from JavaScript and Send Back Data to JavaScript in Ios