Abrir ventana emergente en JavaScript

Este artículo presentará un método para abrir una ventana emergente usando JavaScript.

Abra una ventana emergente utilizando el método open() de la ventana en JavaScript

Una ventana emergente es otra ventana que muestra al usuario información adicional mientras mantiene abierta la ventana original. A veces, se debe usar una ventana emergente al interactuar con el usuario en un sitio web.

Uno de los escenarios populares es mientras se realiza una autorización OAuth. Por ejemplo, cada vez que intenta iniciar sesión en una aplicación SAAS con su cuenta de Gmail, se abre una nueva ventana emergente y muestra la lista de cuentas de Gmail para elegir para iniciar sesión en la aplicación.

El concepto importante a tener en cuenta sobre la ventana emergente es que tiene un entorno de JavaScript, lo que hace que sea seguro ejecutar aplicaciones de terceros y sitios que no son de confianza. Ahora, veamos cómo podemos crear tales ventanas emergentes.

El método open() proporcionado por el objeto window abre una nueva ventana. La sintaxis del método open() se muestra a continuación.

window.open(url, name, parameter)

La opción url es la URL de la página que se va a abrir como ventana emergente. La opción nombre es el nombre de la ventana a abrir.

window.name define el nombre de la ventana en el navegador. La opción parámetro es una notación para la opción de configuración al abrir una ventana.

Contiene varias configuraciones como alto/ancho, barra de menú, barra de herramientas, etc.

Por ejemplo, cree una función de JavaScript popUp() que tome dos parámetros, url y windowName. Dentro de la función, cree una variable nuevaVentana y llame al método open() usando el objeto ventana en la variable.

En el método open(), proporcione los parámetros url, windowName, height y width. Establezca la altura y el ancho de su elección.

A continuación, compruebe la condición window.focus, y si es true, establezca el foco en la nueva ventana que acaba de crear como newWindow.focus(). Finalmente, devuelve false.

En HTML, cree una etiqueta de anclaje <a> </a>. Establezca algunas URL de su elección en el atributo href.

Luego, dentro de la etiqueta de anclaje, crea un evento onclick. Llame a la función popUp() con la misma URL que en el atributo href y el nombre de la ventana como parámetros.

Entre las etiquetas de anclaje, escriba un texto para crear un enlace en el que se pueda hacer clic.

Código de ejemplo:

function popUp(url, windowName) {
  var newWindow = window.open(url, windowName, 'height=200,width=200');
  if (window.focus) {
    newWindow.focus()
  }
  return false;
}

<a href="https://www.youtube.com/" onclick="return popUp('https://www.youtube.com/', 'youtube')">Youtube Popup</a>

En el ejemplo anterior, hemos utilizado la URL de Youtube https://www.youtube.com/ para crear una nueva ventana emergente. Cada vez que ocurre el evento onClick, se crea una nueva ventana.

Luego, el foco se cambia a la ventana recién creada para mostrarla como una ventana emergente. Hemos devuelto false en la función para que el navegador no sea redirigido a la URL configurada en el atributo href.

Por lo tanto, aprendió cómo abrir una nueva ventana emergente usando el método window.open en JavaScript.