NorfiPC
NorfiPC » Informaciones de Windows » Abrir vínculos de una página web en una nueva ventana.
FeedRSS

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


Tweet
Como hacer para que los vínculos o links en nuestra página web se abran en una nueva ventana de manera forzada en Internet Explorer y todos los navegadores web. Utilizar Javascript para cumplir con las especificaciones xhtml y hacer que nuestra página valide de forma satisfactoria.
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:
height Altura de la ventana en pixeles
width Ancho de la ventana en pixeles
left Posicion de la ventana, distancia del borde izquierdo en pixeles
top Posicion de la ventana, distancia del borde superior en pixeles
resizable Permite o no cambiar tamaño de la ventana true|false yes|no
scrollbars Permite o no añadir barras deslizantes true|false yes|no
toolbar Permite o no mostrar la barra de herramientas yes|no
menubar Permite o no mostrar la barra de menú yes|no
location Permite o no mostrar la barra de direcciones yes|no
status Permite o no mostrar la barra de estado yes|no
directories Permite o no mostrar en IE la barra de comandos yes|no
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.
Ejemplo del modo Modal
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:
dialogHeight: (altura de la ventana)px
dialogWidth:(ancho de la ventana)px
dialogLeft: (posición izquierda)px
dialogTop: (posición derecha)px
center: ( yes | no | 1 | 0 | on | off )
dialogHide: ( yes | no | 1 | 0 | on | off )
edge: ( sunken | raised )
help: ( yes | no | 1 | 0 | on | off )
resizable: ( yes | no | 1 | 0 | on | off )
scroll: ( yes | no | 1 | 0 | on | off )
status: ( yes | no | 1 | 0 | on | off )
unadorned: ( yes | no | 1 | 0 | on | off )
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:
1- Hazlo de una forma sencilla con el siguiente código:
Pruébalo: Vinculo que abre esta página en otra pestaña
Trabaja perfectamente y valida en xhtml pero no funciona en Internet Explorer, en este caso se abrirá el link en la misma pestaña en que estamos.
2- Otro método es usar el atributo rel en el link, al que asignaremos el valor que usaremos para saber cuáles son los vínculos que queremos abrir en una ventana nueva, en este caso el valor será "external", será necesario crear una función que se puede insertar en la misma página o en un archivo js externo, el ejemplo siguiente es el script impregnado que se aconseja poner al final de la página, justo antes del cierre de la etiqueta </body>.
Pruébalo: Vinculo que abre esta página en otra pestaña



Paginas relacionadas

Lista de variables y funciones de Javascript
Como escribir con Javascript texto y otros elementos en las páginas web
Como imprimir solo un área, parte o sección de una página web
Como escapar y ocultar texto, código HTML y Javascript en páginas web
Javascript fácil en páginas web, tutorial y ejemplos

Agrega esta página a tus favoritas: Guardar en Favoritos

Seguir a @NorfiPC
NorfiPC en Google+: Compartir en Google+



Anterior |  Subir  | Siguiente
Copyright © 2012 Norfi Carrodeguas Google+