¿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 cargarname
– 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 false
la 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>