Método Window open()

Definición y uso

open() El método abrirá una nueva ventana del navegador o una nueva pestaña, dependiendo de la configuración de su navegador y los valores de los parámetros.

Véase también:

Método close()

Ejemplo

Ejemplo 1

Abrir "www.codew3c.com" en una nueva pestaña del navegador:

window.open("https://www.codew3c.com");

Prueba personalmente

A continuación se proporcionan más ejemplos.

Sintaxis

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

Parámetros

Parámetros descripción
url

Opcional. URL de la página a abrir.

Si no se especifica urlSe abrirá una nueva ventana o pestaña en blanco.
name Opcional. Atributo 'target' o nombre de la ventana.
features Opcional. Lista de elementos separados por comas, sin espacios.
replace

Descontinuado.

Se determina si la URL crea un nuevo elemento o reemplaza el elemento actual en la lista de historial.

Admite los siguientes valores:

  • true - La URL reemplaza el documento actual en la lista de historial
  • false - Se crea un nuevo elemento en la lista de historial con la URL

Advertencia:Chrome al usar replace Se lanzará una excepción al establecer este parámetro.

El parámetro 'name' admite los siguientes valores:

valor descripción
_blank La URL se carga en una nueva ventana o pestaña. Por defecto.
_parent La URL se carga en el marco padre.
_self Reemplazar la página actual con la URL.
_top URL reemplaza cualquier cuadro de frames que pueda cargarse.
name el nombre de la ventana (no especifica el título de la ventana).

los valores admitidos por el parámetro features son los siguientes:

valor descripción
fullscreen=yes|no|1|0 si se muestra el navegador en modo de pantalla completa. El valor predeterminado es no. Las ventanas en modo de pantalla completa también deben estar en modo cine. Solo para IE.
height=pixels alto de la ventana, en píxeles. El valor mínimo es 100.
left=pixels ubicación izquierda de la ventana (coordenada X), en píxeles. No se permiten valores negativos.
location=yes|no|1|0 si se muestra el campo de dirección. Solo para Opera.
menubar=yes|no|1|0 si se muestra la barra de menú.
resizable=yes|no|1|0 si la ventana puede ajustar su tamaño. Solo para IE.
scrollbars=yes|no|1|0 si se muestra la barra de desplazamiento. Solo para IE, Firefox y Opera.
status=yes|no|1|0 si se agrega la barra de estado.
titlebar=yes|no|1|0 si se muestra la barra de título. A menos que la aplicación llamada sea una aplicación HTML o un cuadro de diálogo confiable, de lo contrario se ignorará.
toolbar=yes|no|1|0 si se muestra la barra de herramientas del navegador. Solo para IE y Firefox.
top=pixels ubicación superior de la ventana (coordenada Y), en píxeles. No se permiten valores negativos.
width=pixels ancho de la ventana, en píxeles. El valor mínimo es 100.

valor de retorno

la referencia a la nueva ventana, o null si el llamado falla.

detalles técnicos

descripción

open() el método buscará una ventana existente o abrirá una nueva ventana del navegador. Si name si se especifica una ventana ya existente, se devuelve una referencia a esa ventana. La ventana devuelta mostrará url el documento especificado por el parámetro, pero ignorando features este es el único modo en que JavaScript puede obtener una referencia a esa ventana, sabiendo solo el nombre de la ventana.

si no se especifica name si no se especifica, o si la ventana especificada no existe, entonces open() el método creará una nueva ventana del navegador. Esta nueva ventana mostrará url el URL especificado por el parámetro, cuyo nombre se name se especifica, el tamaño y los controles se definen por features para especificar. Si url si es una cadena vacía, entonces open() para abrir una nueva ventana.

name para especificar el nombre de la nueva ventana. Este nombre solo puede contener números, letras o guiones bajos. Puede usarse como <a> y <form> el valor de la propiedad target, que se utiliza para forzar que el documento se muestre en la ventana específica.

al usar el método Window.open() Al cargar un nuevo documento en una ventana específica existente, se puede pasar replace El parámetro, utilizado para declarar si el nuevo documento tiene su propia entrada en el historial de navegación de la ventana o reemplaza la entrada del documento actual. Si replace El valor es true, el nuevo documento reemplazará el documento antiguo. Si el valor es false o se omite, el nuevo documento tendrá su propia entrada en el historial de navegación de la ventana. La función proporcionada por este parámetro es similar a Método Location.replace() Las funciones proporcionadas son muy similares.

No confunda Window.open() El método es similar a Método Document.open(), para que su código sea claro y legible, es mejor usar Window.open(), y no utilice open(). En el manejador de eventos definido como atributo HTML, generalmente se interpreta la función open() como Document.open()por lo tanto, en este caso, debe usar Window.open().

Características de la ventana

features El parámetro es la lista de características que se mostrarán en la ventana, y las características se separan por comas. Si el valor de este parámetro opcional está vacío o se omite, la ventana mostrará todas las características. Sin embargo, si features Se especifica alguna característica, las características que no aparecen en esta lista no se mostrarán en la ventana. Es importante destacar que esta cadena no contiene ningún espacio o carácter de blanco, y cada elemento tiene el siguiente formato:

feature[=value]

Para la mayoría de las características,value Los valores son yes o no. Los caracteres de igualdad y value Los valores pueden omitirse, si se especifica esta característica, se asume su value El valor es yes, si no se especifica, se asume value El valor es no. Sin embargo, los valores de las características width o height value El valor es obligatorio, asegúrese de especificar sus valores en píxeles.

Soporte del navegador

Todos los navegadores lo soportan open():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte

Más ejemplos

Ejemplo 2

Abrir la página "about:blank" en una nueva ventana o pestaña:

var miVentana = window.open("", "", "width=200,height=100");

Prueba personalmente

Ejemplo 3

Abrir una nueva ventana llamada "MsgWindow" e ingresar algunos textos en la misma:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
miVentana.document.write("<p>Este es 'MsgWindow'. Tengo 200px de ancho y 100px de alto!</p>");

Prueba personalmente

Ejemplo 4

Reemplazar la ventana actual con una nueva ventana:

var miVentana = window.open("", "_self");
myWindow.document.write("<p>Reemplacé la ventana actual.</p>")}

Prueba personalmente

Ejemplo 5

Abrir una nueva ventana y controlar su apariencia:

window.open("https://www.codew3c.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");

Prueba personalmente

Ejemplo 6

Abrir múltiples pestañas:

window.open("http://www.google.com/");
window.open("https://www.codew3c.com/");

Prueba personalmente

Ejemplo 7

Abrir una nueva ventana. Luego utilice close() para cerrar esta nueva ventana:

function openWin() {
  myWindow = window.open("", "myWindow", "width=200,height=100");   // Abrir una nueva ventana
}
function closeWin() {
  myWindow.close();   // Cerrar esta nueva ventana
}

Prueba personalmente

Ejemplo 8

Abrir una nueva ventana. Utilice la propiedad name para devolver el nombre de la nueva ventana:

var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>El nombre de esta ventana es: " + myWindow.name + "</p>");

Prueba personalmente

Ejemplo 9

Utilice la propiedad opener para devolver una referencia a la ventana que creó la nueva ventana:

var myWindow = window.open("", "myWindow", "width=200,height=100");   // Abrir una nueva ventana
myWindow.document.write("<p>Este es 'myWindow'</p>");   // Texto en la nueva ventana
myWindow.opener.document.write("<p>Esta es la ventana de origen!</p>");  // Crear una nueva ventana en el texto de la ventana de creación

Prueba personalmente