What can I do to open a new window because target="_blank" doesn't validate?

Question

I am using jQuery, and wish to make certain links open in a new window.

However, I want to pass as valid XHTML 1.1. Also, I beleive this is a behaviour which should be in the correct layer, i.e. JavaScript.

Any jQuery plugin available?

Answer 1

I've thrown together a quick jQuery plugin

 (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: '' } );

This is my first jQuery plugin, so any feedback would be greatful.

Answer 2

hold on, which XHTML version are you validating against?

the "target" attribute is a valid XHTML 1.0 attribute. Its only not valid in version 1.1.

Could your problem be that you've declared the wrong version at the top of your page?

UPDATE

hmm...well, I don't know much about your app, but if you really need UI which depends on the previous window not being replaced, then maybe you should consider a modal popup.

A link really means, you're going somewhere else. If you need to stay where you are, then why not find another way, such as a modal window, or a hidden/show panel, that falls back gracefully, for further UI?

Answer 3

All links that start with http:// or ftp:// are externals in my case:

$('a[href^="http"],a[href^="ftp"],').bind('click', function(event){
    open(this.href);
    return false;
});

Or change selector for your purpose.

Answer 4

You can use jquery.url.js

Its pretty easy to use as shown below.

$.jqURL.loc("URL",{w:800,h:450,t:150,l:180,wintype:'_blank'});