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 examp

Answer 1

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 2

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 3

Here is a plugin I wrote for jQuery

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

     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 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 4

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.