Descripción
Mediante el método open() cargamos un nuevo recurso o página en una nueva ventana del navegador.
Una ve abierta la ventana obtendremos una referencia a dicha ventana representada por el objeto WindoProxy, que no deja de ser un proxy sobre el elemento Window.
Sintaxis
open()
open(url)
open(url, target)
open(url, target, windowFeatures)
Parámetros
- url, URL de la página que se va a cargar en la ventana. La URL puede ser una URL absoluta como “https://lineadecodigo.com” o relativa como “/DOM/Window”. En el caso de que no se especifique URL se abrirá una página en blanco.
- target, nombre que queremos darle a la nueva ventana. Tiene que ser un identificador por lo que no puede contener espacios en blanco. Este nombre podrá ser utilizado como referencia de otros elementos.
- windowFeatures, es una cadena de pares/valor separados por comas que nos permiten configurar algunas de las capacidades de la nueva ventana. Estas opciones son:
- popup, solo se utilizará una pequeña ventana como popup. En estos casos el navegador solo suele mostrar la barra de navegación. Para activar esta opción le daremos el valor 1, true o yes.
- width, nos permite especificar el ancho del nuevo contenido. Su valor mínimo es de 100.
- height, especifica el alto del nuevo contenido. Su valor mínimo es de 100.
- left, mediante este atributo especificamos la distancia en pixels desde la izquierda del área de trabajo.
- top, especifica la distancia en pixels desde la parte superior del área de trabajo.
- noopener, si activamos esta opción la nueva ventana no será accesible desde la propiedad
Window.opener - noreferrer, si activamos esta propiedad el navegador omitirá la cabecera Referer.
Objeto Padre
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abrir Ventana</title>
<script type="text/javascript">
function abrirVentana(url) {
window.open(url,"nuevo","directories=no,location=no,menubar=no,scrollbars=yes,statusbar=no,tittlebar=no,width=400,height=400")
}
</script>
</head>
<body>
<h1>Abrir Ventana</h1>
<a href="#" onClick="abrirVentana('http://lineadecodigo.com')">Linea de Código</a><br/>
<a href="#" onClick="abrirVentana('http://www.w3api.com')">W3Api</a><br/>
<a href="#" onClick="abrirVentana('http://www.google.com')">Google</a>
</body>
</html>