Apertura Windows y ventanas emergentes con JavaScript

¿Alguna vez te has encontrado con ventanas emergentes molestas que obstaculizan tu navegación en la web? ¿Te gustaría saber cómo utilizar JavaScript para controlarlas y mejorar la experiencia de tus usuarios? En este artículo, te enseñamos todo lo que necesitas saber sobre la apertura de ventanas y ventanas emergentes con JavaScript. ¡Sigue leyendo para descubrir cómo puedes mejorar la usabilidad de tu sitio web!

Uno de los usos más comunes del objeto Ventana es abrir nuevo windows o ventanas emergentes. Mientras estos pop-up windows son bastante molestos para los usuarios cuando los utiliza para publicidad, son bastante útiles cuando los integra en una aplicación web para su uso adecuado.

Aquí está el sintaxis utilizado para abrir una nueva ventana. Podemos usar el window.open método para abrir nuevos windows.

window.open(url,name,features,history)

Todos los parámetros que pasa en el método abierto son opcionales. Si sin parámetros se pasan, el navegador abre una nueva about:blank ventana.

URL

La URL de la página para abrir en la nueva ventana. Este parámetro es opcional.

Nombre

Este parámetro especifica el atributo de destino o el nombre de la ventana. Este parámetro es opcional. Se admiten los siguientes valores:

  • _blank – La URL se carga en una nueva ventana, valor predeterminado
  • _parent – La URL se carga en la ventana principal
  • _self – URL reemplaza la ventana actual
  • _top – URL reemplaza cualquier conjunto de marcos que se pueda cargar
  • name – El nombre de la ventana.

Características

Este conjunto de parámetros se utiliza para la mayoría de los personalización de la nueva ventana. Se puede pasar más de un parámetro separando la lista de valores con una coma. Este parámetro es opcional.

Parámetro Descripción
channelmode=yes|no|1|0 Si mostrar o no la ventana en modo teatro. El valor predeterminado es no. IE solamente.
directories=yes|no|1|0 Si agregar o no botones de directorio. El valor predeterminado es sí. IE solamente.
fullscreen=yes|no|1|0 Mostrar o no el navegador en modo de pantalla completa. El valor predeterminado es no.
Debe estar en modo teatro.
height=pixels La altura de la ventana. El valor mínimo es 100px.
left=pixels La posición izquierda de la ventana.
location=yes|no|1|0 Mostrar o no el campo de dirección. El valor predeterminado es sí.
menubar=yes|no|1|0 Mostrar o no la barra de menú. El valor predeterminado es sí.
resizable=yes|no|1|0 Si la ventana es redimensionable o no. El valor predeterminado es sí.
scrollbars=yes|no|1|0 Mostrar o no las barras de desplazamiento. El valor predeterminado es sí.
status=yes|no|1|0 Si agregar o no una barra de estado. El valor predeterminado es sí.
titlebar=yes|no|1|0 Mostrar o no la barra de título. El valor predeterminado es sí.
toolbar=yes|no|1|0 Mostrar o no la barra de herramientas del navegador. El valor predeterminado es sí.
top=pixels La posición superior de la ventana. IE solamente.
width=pixels El ancho de la ventana. El valor mínimo es 100px.

Historia

Especifica si la URL crea una nueva entrada o reemplaza la entrada actual en la lista del historial. Este parámetro es opcional. Se admiten los siguientes valores: true y false.

Con true, la URL reemplaza el documento actual en la lista de historial. Con falsela URL crea una nueva entrada en la lista de historial.

Ejemplo

Aquí hay un ejemplo que se puede usar para abrir una pequeña ventana emergente.

<html>
<head>
    <script type="text/javascript">
        function openWindow() {
            myWin = window.open('', '', 'width=400,height=300');
            myWin.document.write("Hello!");
        }
    </script>
</head>
<body>
    <input type="button" value="Open Window!" onclick="openWindow()" />
</body>
</html>

Creando Ventana Modal (Popup) con HTML/CSS y JavaScript

En este tutorial te explicamos como crear una ventana modal utilizando #HTML, #CSS y #JavaScript. Obtén el código: ...

Deja un comentario