¿Cuál es la mejor manera de abrir una nueva ventana del navegador?

Question

Sé que la mayoría de los enlaces deben dejarse en manos del usuario final para decidir cómo abrirlos, pero no podemos negar que hay momentos en los que 'tiene que' forzar una nueva ventana (por ejemplo, para mantener los datos en un formulario en la página actual).

Lo que me gustaría saber es cuál es el consenso sobre la "mejor" forma de abrir un enlace en una nueva ventana del navegador.

Sé que <a href="url" target="_blank"> está fuera. También sé que <a href="#" onclick="window.open(url);"> no es ideal por una variedad de razones. También traté de reemplazar por completo los anclajes con algo como <span onclick="window.open(url);"> y luego darle un estilo al SPAN para que parezca un enlace.

Una solución a la que me inclino es <a href="url" rel="external"> y el uso de JavaScript para establecer todos los objetivos en '_blank' en los anclajes marcados como 'externos'.

¿Hay alguna otra idea? ¿Que es mejor? Estoy buscando la forma más fácil y más compatible con XHTML para hacer esto.

ACTUALIZACIÓN: Digo target = "_ blank" es un no no, porque he leído en several places que el atributo de destino va a ser eliminado de XHTML.

Answer 1

Estoy utilizando el último método que ha propuesto. Añado rel = "externo" o algo similar y luego usar jQuery para iterar a través de todos los enlaces y asignarles un controlador de clic:

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

Me parece el mejor método porque:

• muy es borrar semánticamente: usted tiene un enlace a un recurso externo
• es compatible con los estándares
• se degrada con gracia (que tienen un vínculo muy simple con atributo regular href)
• que todavía permite que el usuario medio clic en el enlace y abrirlo en una nueva pestaña si así lo desean

Answer 2

¿Por qué es target="_blank" una mala idea?

Se supone que debe hacer exactamente lo que quiere.

editar: (ver comentarios) punto tomado, pero creo que el uso de javascript para hacer tal tarea puede llevar a algunas personas bastante molestas (aquellos que hacen clic medio para abrir en una nueva ventana por hábito, y aquellos que use una extensión de NoScript)

Answer 3

Tal vez estoy malinterpretando algo pero ¿por qué no quiere usar target = "_ blank"? Esa es la forma en que lo haría. Si está buscando el más compatible, entonces se eliminará cualquier tipo de JavaScript, ya que no puede estar seguro de que el cliente tenga habilitado JS.

Answer 4

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

Esto todavía se abrirá el enlace (aunque en la misma ventana) si el usuario ha desactivado la JS. De lo contrario, funciona exactamente igual que target = blank, y es fácil de usar, ya que solo tiene que agregar la función onclick (quizás usando JQuery) a todas las etiquetas normales.

Answer 5

Si utiliza cualquier sabor de tipo de documento estricta o de los próximos XHTML sabores reales, el objetivo no está permitido ...

Uso de transición, cualquiera que sea HTML4.01 o XHTML1, se puede utilizar la solución Damirs, a pesar de que no ejecuta el windowName-propiedad que es necesaria en window.open():

En HTML plano:

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

Sin embargo, si se utiliza uno de los tipos de documento estrictos su única forma de abrir enlaces sería usar esta solución sin el atributo de destino ...

- por cierto, la cantidad de navegadores que no son js a menudo se calcula mal, buscando los números de los contadores se refieren a números muy diferentes, y me pregunto cuántos de esos navegadores que no son js son rastreadores y similares. -)

Answer 6

Si estoy en una página de formulario y hago clic en un enlace moreinfo.html (por ejemplo) hace que pierda datos a menos que lo abra en una nueva pestaña/ventana, solo dígame.

Puede engañarme para abrir una nueva pestaña/ventana con window.open() o target = "_ blank", pero podría tener objetivos y ventanas emergentes deshabilitados. Si se requieren JS, objetivos y ventanas emergentes para que me engañe y abra una nueva ventana/pestaña, dígamelo antes de comenzar con el formulario.

O bien, haga enlaces a otra página para solicitar un formulario, de modo que cuando el visitante envíe, los datos del formulario actual se guarden para que puedan continuar desde la última vez, si es posible.

Answer 7

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

Los detalles se describen en mi answer to another question.

Answer 8

Por favor, no fuerce abriendo un enlace en una nueva ventana.

razones en contra:

• infringe la regla de la mínima sorpresa.
• El botón de retroceso no funciona y el usuario no sabe por qué.
• ¿Qué sucede en los navegadores con pestañas? Nueva pestaña o nueva ventana? Y lo que ocurra, ¿es lo que quieres, si mezclas pestañas y ventanas?

La razón por la que siempre escucho a favor de abrir una nueva ventana es porque el usuario no abandonará el sitio. Pero asegúrese, nunca volveré a un sitio que me molesta. Y si el sitio me quita el control, eso es una gran molestia.

Una forma puede ser que proporcione dos enlaces, uno es normal y el otro lo abre en una nueva ventana. Agregue el segundo con un pequeño símbolo después del enlace normal. De esta forma, los usuarios de su sitio mantienen el control del enlace en el que desean hacer clic.

Answer 9

Aquí es un plugin que escribí para 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); 

Ejemplo de Uso

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

También puede cambiar o quitar el texto del título, mediante el paso en algunas opciones

Ejemplo para cambiar el texto del título:

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

Ejemplo para eliminarla alltogether

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

Answer 10

utilizo este ...

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