What's the best way to open new browser window?

Question

I know that most links should be left up to the end-user to decide how to open, but we can't deny that there are times you almost 'have to' force into a new window (for example to maintain data in a form on the current page).

What I'd like to know is what the consensus is on the 'best' way to open a link in a new browser window.

I know that <a href="url" target="_blank"> is out. I also know that <a href="#" onclick="window.open(url);"> isn't ideal for a variety of reasons. I've also tried to completely replace anchors with something like <span onclick="window.open(url);"> and then style the SPAN to look like a link.

One solution I'm leaning towards is <a href="url" rel="external"> and using JavaScript to set all targets to '_blank' on those anchors marked 'external'.

Are there any other ideas? What's better? I'm looking for the most XHTML-compliant and easiest way to do this.

UPDATE: I say target="_blank" is a no no, because I've read in several places that the target attribute is going to be phased out of XHTML.

Answer 1

Why is target="_blank" a bad idea?

It's supposed to do exactly what you want.

edit: (see comments) point taken, but I do think that using javascript to do such a task can lead to having some people quite upset (those who middle click to open on a new window by habit, and those who use a NoScript extension)

Answer 2

Perhaps I'm misunderstanding something but why don't you want to use target="_blank"? That's the way I would do it. If you're looking for the most compatible, then any sort of JavaScript would be out as you can't be sure that the client has JS enabled.

Answer 3

<a href="http://www.google.com" onclick="window.open(this.href); return false">

This will still open the link (albeit in the same window) if the user has JS disabled. Otherwise it works exactly like target=blank, and it's easy to use as you just have to append the onclick function (perhaps by using JQuery) to all normal tags.

Answer 4

I say target="_blank" is a no no, because I've read in several places that the target attribute is going to be phased out of XHTML.

Answer 5

I am using the last method you proposed. I add rel="external" or something similar and then use jQuery to iterate through all links and assign them a click handler:

$(document).ready(function() {
  $('a[rel*=external]').click(function(){
    window.open($(this).attr('href'));
    return false; 
  });
});

I find this the best method because:

• it is very clear semantically: you have a link to an external resource
• it is standards-compliant
• it degrades gracefully (you have a very simple link with regular href attribute)
• it still allows user to middle-click the link and open it in new tab if they wish

Answer 6

If you use any flavor of strict doctype or the coming real xhtml-flavors, target isn't allowed ...

Using transitional, whatever being HTML4.01 or XHTML1, you can use Damirs solution, though it fails to implement the windowName-property which is necessary in window.open():

In plain html:

<a href="..." target="_blank" onclick="window.open(this.href, 'newWin'); return false;">link</a>

If however you use one of the strict doctypes your only way of opening links would be to use this solution without the target-attribute ...

-- by the way, the number of non-js-browsers is often miscalculated, looking up the counters numbers refer very different numbers, and I'm wondering how many of those non-js-browsers is crawlers and the like !-)

Answer 7

If I'm on a form page and clicking on a moreinfo.html link (for example) causes me to lose data unless I open it in a new tab/window, just tell me.

You can trick me in to opening a new tab/window with window.open() or target="_blank", but I might have targets and pop-ups disabled. If JS, targets and pop-ups are required for you to trick me into opening a new window/tab, tell me before I get started on the form.

Or, make links to another page a form request, so that when the visitor submits, the current form data is saved so they can continue from last time, if possible.

Answer 8

<a href="http://some.website.com/" onclick="return !window.open( this.href );">link text</a>

Details are described in my answer to another question.

Answer 9

Please, don't force opening a link in a new window.

Reasons against it:

• It infringes the rule of the least astonishment.
• The back-button don't work and the user not possibly knows why.
• What happen in tabbed browsers? New tab or new window? And whichever happens, is it what you wants, if you mix tabs and windows?

The reason I always hear in favor of opening a new window is that the user will not leave the site. But be sure, I will never come back to a site that annoys me. And if the site takes away control from me, that is a big annoyance.

A way may be, that you give two links, one is normal, the other opens it in a new window. Add the second with a little symbol after the normal link. This way users of your site stay in control of which link they want to click on.

Answer 10

Here is a plugin I wrote for jQuery

 (function($){  
  $.fn.newWindow = function(options) {       
    var defaults = {
     titleText: 'Link opens in a new window'  
    };

    var options = $.extend(defaults, options);

     return this.each(function() {  
       var obj = $(this);

       if (options.titleText) {        
        if (obj.attr('title')) {
                     var newTitle = obj.attr('title') + ' (' 
                                                + options.titleText + ')';
        } else {
                    var newTitle = options.titleText;
        };         
        obj.attr('title', newTitle);         
       };        

       obj.click(function(event) {
          event.preventDefault();  
       var newBlankWindow = window.open(obj.attr('href'), '_blank');
       newBlankWindow.focus();
     });     
       });    
  };  
 })(jQuery);

Example Usage

$('a[rel=external]').newWindow();

You can also change, or remove the title text, by passing in some JSON options

Example to change title text:

$('a[rel=external]').newWindow( { titleText: 'This is a new window link!' } );

Example to remove it alltogether

$('a[rel=external]').newWindow( { titleText: '' } );

Answer 11

I use this...

$(function() {
  $("a:not([href^='"+window.location.hostname+"'])").click(function(){
    window.open(this.href);
    return false;
  }).attr("title", "Opens in a new window");
});