162

Is there a way to make a link open a new browser window (not tab) without using javascript?

0

4 Answers 4

280

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>
11
  • 9
    Depending on the OP's definition of "without javascript" (this answer uses JS but without including any JS files or <script> elements), this is mostly the correct answer. I recommend adding href, which encourages the browser to style the link correctly: see here: jsfiddle.net/tobek/GPg6t/1. href should point the actual link you're opening with JS, which keeps it semantically correct and is more understandable to search engines. return false prevents the browser from actually going to that link.
    – tobek
    Jan 14, 2014 at 18:04
  • 4
    @KyleClegg I think you would add the "top" and "left" attributes to the window.open() call, but it is up to you do decide how large the screen is. I don't believe there is an automatic way to center a new window. This link may help: w3schools re window open
    – Phil DD
    Apr 9, 2014 at 18:12
  • 1
    For making it Resizable and having scrollbar just add....<br/> <a href="facebook.com" onclick="window.open('facebook.com', 'newwindow', 'width=300, height=250 ,resizable=yes , scrollbars=yes'); return false;"> Fb</a> Dec 27, 2015 at 7:06
  • 4
    You can also use only href, using <a href="javascript:window.open('print.html', 'newwindow', 'width=300,height=250')">Print</a> Jan 11, 2018 at 20:15
  • 5
    Also if you don't want to repeat the link you can use: onclick="window.open(this.href,'newwindow','width=1000,height=800'); return false;" this uses the href of element <a>
    – Koronos
    Jul 10, 2018 at 21:13
149

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.

4
  • 3
    Seems to be not working in 2015. Safari 9.0 Sep 10, 2015 at 11:21
  • @StefanHuska I think I explained that quite clearly in my answer: and hope for the right browser settings - If your browser is configured to open the link in a new tab, there is nothing you can do about it from the html perspective. That is not a matter of year or browser, most modern browsers open in a new tab nowadays. You need a javascript solution like Ievgen's for this.
    – Christoph
    Sep 15, 2015 at 14:27
  • not working in google chrome and firefox (IE support this)
    – Joe Kdw
    Oct 14, 2015 at 18:37
  • @JeanGkol I rewrote my answer to clarify the issue. Technically, it is working, because it opens a new browsing context (like it is supposed to do). The problem is, that in modern browsers "browsing context" is a tab instead of a window (you can change this in the settings though).
    – Christoph
    Oct 15, 2015 at 14:14
39

I know that its bit old Q but if u get here by searching a solution so i got a nice one via jquery

  jQuery('a[target^="_new"]').click(function() {
    var width = window.innerWidth * 0.66 ;
    // define the height in
    var height = width * window.innerHeight / window.innerWidth ;
    // Ratio the hight to the width as the user screen ratio
    window.open(this.href , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height) / 2) + ', left=' + ((window.innerWidth - width) / 2));

});

it will open all the <a target="_new"> in a new window

EDIT:

1st, I did some little changes in the original code now it open the new window perfectly followed the user screen ratio (for landscape desktops)

but, I would like to recommend you to use the following code that open the link in new tab if you in mobile (thanks to zvona answer in other question):

jQuery('a[target^="_new"]').click(function() {
    return openWindow(this.href);
}


function openWindow(url) {

    if (window.innerWidth <= 640) {
        // if width is smaller then 640px, create a temporary a elm that will open the link in new tab
        var a = document.createElement('a');
        a.setAttribute("href", url);
        a.setAttribute("target", "_blank");

        var dispatch = document.createEvent("HTMLEvents");
        dispatch.initEvent("click", true, true);

        a.dispatchEvent(dispatch);
    }
    else {
        var width = window.innerWidth * 0.66 ;
        // define the height in
        var height = width * window.innerHeight / window.innerWidth ;
        // Ratio the hight to the width as the user screen ratio
        window.open(url , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height) / 2) + ', left=' + ((window.innerWidth - width) / 2));
    }
    return false;
}
4
  • top=300, left=350 Thank you for this line! :)
    – sohaiby
    May 7, 2015 at 13:18
  • 2
    The OP requested "no javascript", but jQuery is based in javascript.
    – Sablefoste
    Jun 10, 2015 at 3:17
  • You right, but either that there is no other solution and this is more elegant. it reflect the original behave of the document. if you want no javascript solution? you can just use the '_blank' like in Christoph answer.
    – Cuzi
    Jun 10, 2015 at 3:19
  • return false; is necessary not just for the mobile solution. Otherwise this was a perfect fit for me
    – Ngodza
    Sep 3, 2020 at 7:54
0

You can try this:-

   <a href="some.htm" target="_blank">Link Text</a>

and you can try this one also:-

  <a href="some.htm" onclick="if(!event.ctrlKey&&!window.opera){alert('Hold the Ctrl Key');return false;}else{return true;}" target="_blank">Link Text</a>

Not the answer you're looking for? Browse other questions tagged or ask your own question.