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

como funciona javascript

Question

Sé que la mayoría de los enlaces deben dejarse en manos del usuario final para decidir cómo abrir, pero no podemos negar que hay momentos en los que casi ''tiene que'' forzar a entrar en una nueva ventana (por ejemplo, para mantener los datos en una forma 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 estoy inclinando es <a href="url" rel="external"> y el uso de JavaScript para establecer todos los objetivos a ''_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 varios lugares que el atributo objetivo se eliminará gradualmente de XHTML.

Answer 1

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

Se supone que debe hacer exactamente lo que quieras.

editar: (ver comentarios) punto tomado, pero creo que usar 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 usan una extensión NoScript )

Answer 2

Aquí hay un complemento 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 eliminar el texto del título, pasando algunas opciones

Ejemplo para cambiar el texto del título:

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

Ejemplo para eliminarlo todo junto

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

Answer 3

Estoy usando el último método que propusiste. Agrego rel = "external" o algo similar y luego uso jQuery para iterar a través de todos los enlaces y asignarles un manejador de clics:

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

Encuentro este el mejor método porque:

• está muy claro semánticamente: tienes un enlace a un recurso externo
• cumple con los estándares
• se degrada graciosamente (tienes un enlace muy simple con el atributo href regular)
• todavía le permite al usuario hacer clic en el enlace y abrirlo en una pestaña nueva si lo desea

Answer 4

Por favor, no fuerce la apertura de un enlace en una nueva ventana.

Razones contra esto:

• Infringe la regla del menor asombro.
• El botón de retroceso no funciona y el usuario posiblemente 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 5

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

Puede engañarme para que abra una nueva pestaña / ventana con window.open () o target = "_ blank", pero es posible que tenga objetivos y ventanas emergentes deshabilitados. Si se requieren JS, objetivos y ventanas emergentes para que me engañes y abran una nueva ventana / pestaña, avísame antes de comenzar con el formulario.

O bien, establezca 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 6

Si usa cualquier sabor de doctype estricto o los próximos sabores xhtml reales, el objetivo no está permitido ...

Usando transitional, cualquiera que sea HTML4.01 o XHTML1, puede usar la solución de Damir, aunque no implementa la propiedad windowName que es necesaria en window.open ():

En html simple:

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

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

- Por cierto, el número de navegadores que no son js a menudo se calcula mal, al buscar 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 7

Tal vez estoy malinterpretando algo, pero ¿por qué no quieres utilizar 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 8

Yo uso esto...

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

Answer 9

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

Los detalles se describen en mi respuesta a otra pregunta .

Answer 10

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

Esto aún abrirá el enlace (aunque en la misma ventana) si el usuario tiene JS deshabilitado. 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.