NorfiPC

Como abrir links de una página web en una nueva ventana con Internet Explorer y otros navegadores

Tweet
Para todos los que de una forma u otra estamos interesados en la edición web, necesitamos disponer de la opción para que los vínculos o links en nuestras páginas se abran en nuevas ventanas, principalmente para impedir que sin querer al ofrecer un link interesante, esto traiga como consecuencia que nuestro visitante abandone definitivamente la página. Obligando a abrir un vínculo en una nueva pestaña o ventana le estamos ofreciendo una opción pero siempre permitiendo que permanezca nuestra página abierta en su navegador.
Con la actual especificación del formato XHTML esto es una odisea, pues el método usado tradicionalmente de incluir en los links target="_blank" ya no valida con dicha especificación. Es imprescindible utilizar Javascript, todos los navegadores dan soporte y viene habilitado en ellos de forma predeterminada.
Si lo que deseas es que un link o vinculo abra una nueva pestaña es más fácil, léelo más abajo.
Como abrir los links o vínculos en una nueva pestaña en el navegador web.

Como abrir nuevas ventanas con el navegador web utilizando Javascript

En los navegadores modernos crear un vínculo en una página web que se abra forzadamente en una nueva ventana no es difícil utilizando Javascript.
Para eso usamos el método window.open() cuya sintaxis es la siguiente:
window.open(URL,nombre,opciones)
Sustituye URL por la dirección url, nombre es opcional, y las opciones permiten especificar las propiedades de la ventana que se va a abrir.
El siguiente código creará un vínculo que permitirá abrir una nueva ventana cuya posición sea en la esquina superior izquierda de la pantalla a 50px de cada borde, la ventana tendrá las dimensiones de 400px de altura y 600 de ancho.

Nueva nueva ventana

Con un botón seria:


Las opciones posibles de utilizar son:
Para que los vínculos anteriores funcionen en Internet Explorer, no abriendo una nueva ventana, pero que sean funcionales para evitar el rechazo y una mala experiencia en el usuario que emplee ese navegador, utiliza el llamado Browser Sniffer o selector de navegadores de la siguiente forma:
Nueva nueva ventana

Como abrir nuevas ventanas con el navegador Internet Explorer

Ninguno de los métodos anteriores funciona en Internet Explorer, este navegador por cuestiones de seguridad tiene vedado abrir nuevas ventanas.
No obstante existen dos métodos poco conocidos y divulgados con los es posible abrir nuevas ventanas en el navegador, son los llamados modos o ventanas de dialogo Modal y Modeless.
Utilizan las funciones de Javascript: window.showModalDialog() y window.showModelessDialog() respectivamente.
La sintaxis para usar las dos son similares:
window.showModalDialog("url", "","ornamentos");
Sustituye url por la dirección url y ornamentos por las opciones que especifican las características de la ventana que se quiere abrir.

Ejemplos.
Para crear dos botones que permitan abrir dos ventanas de prueba usa los usa los siguientes códigos:

El resultado sería el siguiente:



Al probarlos verás la gran diferencia, el modo Modal ocupa completamente el foco y no permite interactuar con la página, esta diseñado para cuadros de diálogos de los que es necesario salir para poder seguir utilizando la interface del navegador, este modo funciona también en los navegadores Google Chrome y Firefox.
El modo Modal puede ser muy útil para mostrar imágenes en una nueva ventana, la gran ventaja es su compatibilidad con todos los navegadores. Prueba un ejemplo sencillo de su uso en el siguiente link. Se utilizó el siguiente código:

<a href="javascript:window.showModalDialog
('../img/f2.jpg','','dialogHeight:360px;dialogWidth:570px');void 0">

El modo Modeless si permite la interacción con la página, es la opción ideal para abrir nuevas ventanas pero solo funciona en Internet Explorer.

Opciones para usar el modo Modal y Modeless

Las opciones posibles de especificar que posibiliten configurar las ventanas o cuadros de dialogo conocidas como ornamentos son las siguientes, utilízalas separadas por punto y coma(;):
Ornamentos:
Ejemplo.
El siguiente código permitirá crear un botón para abrir una nueva ventana cuya posición sea en la esquina superior izquierda de la pantalla a 50px de cada borde, la ventana tendrá las dimensiones de 300px de altura y 400 de ancho.

Como lograr que el modo Modeless funcione en otros navegadores web

Por supuesto ModelessDialog no los entiende ningún otro navegador que no sea Internet Explorer, para lograr la compatibilidad usándolo en nuestras páginas es necesario crear una alternativa en Javascript, una posibilidad es emplear el siguiente código:



Otra forma de usarlo si vas crear varios links mediante la siguiente función que puedes insertar al final de la página donde se especifica la posición de la ventana en pantalla:


Y luego crea los links de la siguiente forma en los que especificas el tamaño de cada ventana:

O si es para un botón seria así:

Como abrir los links o vínculos en una nueva pestaña en el navegador web

Para hacer que un vínculo de una página web se abra de forma forzada en una nueva pestaña del navegador, puedes utilizar cualquiera de los siguientes métodos:

---

Paginas relacionadas