DeepL (y muchos otros sitios web) se pueden abrir en una pestaña/ventana separada en la primera ejecución, pero en la misma pestaña/ventana separada en ejecuciones posteriores. ese es el objetivo
window.open("https://www.deepl.com/translator", "sameD");
Google Traductor no puede, siempre se abre en una nueva pestaña en ejecuciones posteriores, incluso si el nombre de la ventana es el mismo
window.open("https://translate.google.com", 'sameG');
¿Por qué Google Traductor no se abre en la misma pestaña, lo rechaza explícitamente? ¿Y cómo hace eso?
¿O hay otro parámetro en window.open para garantizar que se pueda abrir una URL en la misma pestaña/ventana separada?
No es una solución sino una explicación de lo que está experimentando:
Como tu ya sabes
window.open("https://translate.google.com", 'sameG');
abrirá una nueva ventana/pestaña con el nombre sameG
. La llamada también devolverá un proxy al objeto de window
de esa página .
Además, esto configurará window.opener
en la nueva ventana como un proxy de la window
de la ventana de llamada.
Por lo general, volver a llamar a window.open()
con el mismo nombre de ventana actualizará la ventana abierta anteriormente para navegar a la nueva URL, como se ve en el ejemplo de deepl.com
.
Pero translate.google.com
envía un
Cross-Origin-Opener-Policy: same-origin-allow-popups
¡encabezamiento! Este encabezado es de hecho un encabezado de seguridad del navegador y aísla el contexto del navegador de la nueva ventana, es decir, el valor de retorno de window.open()
no le dará ningún acceso a la ventana recién abierta y window.opener
en ella está configurado en null
Además, esto pierde la referencia al nombre de la ventana sameG
y, por lo tanto, las llamadas posteriores a window.open()
volverán a abrir una nueva ventana en lugar de actualizar la ya abierta.
TL; DR: La Cross-Origin-Opener-Policy
es la razón de esto.
El segundo parámetro que toma el método window.open()
es el parámetro de target
, que es el nombre del contexto de navegación en el que se está cargando el recurso. Puede usar las palabras clave de destino especiales , en este caso será "_self"
:
window.open("https://translate.google.com", "_self")