That will open a new window, not tab (with JavaScript, but quite laconically):
<a href="print.html"
onclick="window.open('print.html',
'newwindow',
'width=300,height=250');
return false;"
>Print</a>
Answer from Ievgen on Stack OverflowThat will open a new window, not tab (with JavaScript, but quite laconically):
<a href="print.html"
onclick="window.open('print.html',
'newwindow',
'width=300,height=250');
return false;"
>Print</a>
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.
Videos
i think yo want to open a completely new window on clicking a link.in other words u want a popup.try the following code.
<script language="javascript" type="text/javascript">
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
<a href="popupex.html" onclick="return popitup('popupex.html')">Link to popup</a>
This works in theory but it will depend on the preferences set in the browser. Now a days you can fake a new window by using div's and Layers. Is there anyway to implement a layer that hides what is behind it.
JavaScript:
function getElementsByClass( searchClass, domNode, tagName) {
if (domNode == null) domNode = document;
if (tagName == null) tagName = '*';
var el = new Array();
var tags = domNode.getElementsByTagName(tagName);
var tcl = " "+searchClass+" ";
for(i=0,j=0; i<tags.length; i++) {
var test = " " + tags[i].className + " ";
if (test.indexOf(tcl) != -1)
el[j++] = tags[i];
}
return el;
}
// paste getElementsByClass function (see above) here
function showtab(tabname)
{
// hide every element with class 'box1'
var tabs = getElementsByClass('box1');
for(i=0; i<tabs.length; i++) {
tabs[i].style.display = 'none';
//tabs[i].style.visibility = 'hidden';
}
// hide every element with class 'box1'
var tabs2 = getElementsByClass('myStyle');
for(i=0; i<tabs2.length; i++) {
tabs2[i].style.display = 'none';
//tabs2[i].style.visibility = 'hidden';
}
document.getElementById(tabname).style.display='block';
//document.getElementById(tabname).style.visibility='visible';
// show element with given tabname
}
function showsubtab(tabname)
{
//hide every element with class 'myStyle'
var tabs = getElementsByClass('myStyle');
for(i=0; i<tabs.length; i++) {
tabs[i].style.display = 'none';
//tabs[i].style.visibility = 'hidden';
}
document.getElementById(tabname).style.display='block';
//document.getElementById(tabname).style.visibility='visible';
}
if (window.addEventListener) { // Mozilla, Netscape, Firefox
window.addEventListener('load', showmessage, false);
} else if (window.attachEvent) { // IE
window.attachEvent('onload', showmessage);
}
function showmessage() {
document.getElementById('box').style.display='block';
document.getElementById('div1').style.backgroundColor='grey';
document.getElementById('div1').style.opacity = 0.2;
document.documentElement.style.overflow = "hidden"; //firefox, chrome
document.body.scroll = "no"; // ie only
var bodyLayer = document.getElementById('div1');
DisableLinks(bodyLayer);
}
function hidemessage() {
document.getElementById('box').style.display='none';
document.getElementById('div1').style.backgroundColor='transparent';
document.getElementById('div1').style.opacity = 1.0;
document.documentElement.style.overflow = 'auto'; // firefox, chrome
document.body.scroll = "yes"; // ie only
var bodyLayer = document.getElementById('div1');
EnableLinks(bodyLayer);
}
function DisableLinks(dom) {
if(undefined != dom){
links=dom.getElementsByTagName('A');
} else {
links=document.getElementsByTagName('A');
}
for(var i=0; i<links.length; i++) {
links[i].style.pointerEvents="none";
}
}
function EnableLinks(dom) {
if(undefined != dom){
links=dom.getElementsByTagName('A');
} else {
links=document.getElementsByTagName('A');
}
for(var i=0; i<links.length; i++) {
links[i].style.pointerEvents="auto";
}
}
HTML
<div id="box">
<section id="close">
<section id="title">Important Site Message</section>
<section id="button"><a href="#" onClick="hidemessage();">[X]</a> </section>
</section>
<!--Body of the Message-->
</div>
CSS #box {position: absolute; top: 50%; left: 50%; height: 15.625em; width: 25em; background-color:#FFF; margin-top: -7.8125em; margin-left: -12.5em; display: none; overflow: auto; border-color:#000; border-style:ridge; border-width:medium; z-index: 3; color: #000;} #close {border-bottom: inset thick #CCC; background-color: #000; width: inherit; height: 1.2em; color: #FFF; position: fixed;} #close a:visited {color: #FFF;} #close a:hover {color: red; text-decoration:none;} #close #title {text-align: center; font-weight:bold; width: 90%; padding: 1 1 1 1; clear: left; float: left; background-color:#000; color:#FFF;} #close #button {text-align: right; padding: 1 1 1 1; width: 10%; clear: right; float: right; background-color: #000; color: #FFF;}
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'
Use one of these as per your requirements.
Open the linked document in a new window or tab:
<a href="xyz.html" target="_blank"> Link </a>
Open the linked document in the same frame as it was clicked (this is default):
<a href="xyz.html" target="_self"> Link </a>
Open the linked document in the parent frame:
<a href="xyz.html" target="_parent"> Link </a>
Open the linked document in the full body of the window:
<a href="xyz.html" target="_top"> Link </a>
Open the linked document in a named frame:
<a href="xyz.html" target="framename"> Link </a>
See MDN
Hi Haneen,
thank you for the quick reply. Unfortunately this does not work, at least not in the Mac version. The option simply does not appear:
For the Mac version try doing these steps and seeing if it works this way.
- Check Edge Settings:
- Open Microsoft Edge on your Mac.
- Click on the three horizontal dots (ellipsis) in the top-right corner to open the menu.
- Go to "Settings."
- Look for an option related to opening links or new windows. This might be under the "On startup" or "Privacy, search, and services" section.
- Adjust the settings according to your preference.
- Use Keyboard Shortcuts:
- When you click a link in an external application, hold down the "Command" key (⌘) on your keyboard. This might force the link to open in a new window.
- Edge Updates:
- Ensure that your Microsoft Edge browser is up to date. Updates can sometimes introduce new features or change existing behaviors.
- Mac System Preferences:
- Check your Mac's System Preferences for any default settings related to opening links in applications. For instance, you can check "General" settings to see if there are options for handling links.
Let me know if this helps!
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"
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).
Additionally, some browsers don't have a tabs feature and therefore cannot open a link in a new tab, only in a new window.
This is a trick,
function openInNewTab(url) {
window.open(url, '_blank').focus();
}
// Or just
window.open(url, '_blank').focus();
In most cases, this should happen directly in the onclick handler for the link to prevent pop-up blockers, and the default "new window" behavior. You could do it this way, or by adding an event listener to your DOM object.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
Reference: Open a URL in a new tab using JavaScript
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.