Creé un sitio muy simple para crear una ventana emergente en mi segunda pantalla.
La Api de ubicación de ventanas de múltiples pantallas promete hacer el truco, pero no puedo hacer que funcione.
Obtengo toda la información sobre ambas pantallas, pero no puedo abrir la ventana emergente en la pantalla correcta.
¿Alguien tiene alguna idea? ¿Es por el permiso de "ubicación de ventanas" o algo así?
Aquí está el sitio simple que hice:
<!DOCTYPE html> <html> <title>Window Placement</title> <head> <script type="text/javascript"> let url = "file:///C:/Users/path/to/file.html"; let x = "1000"; let y = "250"; let width = "250"; let height = "250"; let popup; async function screenDetails() { if (window.screen.isExtended) { console.log("Multiple screens detected"); try { const screens = await window.getScreenDetails(); let primary; let second; for (let element of screens.screens) { if (element.isPrimary) { primary = element; } else { second = element; } } let features = "left=" + x + ",top=" + y + ",width=" + width + ",height=" + height; popup = window.open(url, 'Popup', features); } catch (err) { console.error(err); } } else { console.log("Single screen detected"); } } </script> </head> <body> <button type="button" onclick="open()">Open</button> </body> </html>Entonces, lo hice funcionar, aunque no en el entorno de Stack Snippet en el que estoy proporcionando el código.
De hecho, tiene que ver con los permisos; debe pedir permiso para obtener detalles de la pantalla. En el código a continuación, creé una nueva función que consultará para hacer esto, getPermissionAndScreenDetails en el código a continuación. Verifica que la API esté disponible, que el permiso esté presente y no sea denegado (se 'denegará' automáticamente en un fragmento de pila por razones de seguridad). Luego devuelve el resultado de llamar a window.getScreenDetails() , ya que es necesario para obtener permiso si el state se establece en 'prompt'.
Modifiqué su función para usar el valor de retorno de esa función.
También agregué un código que abrirá la ventana emergente en el medio de la primera pantalla secundaria que encuentre.
let url = "about:blank"; let x = "1000"; let y = "250"; let width = "250"; let height = "250"; let popup; async function getPermissionAndScreenDetails() { if ('getScreenDetails' in window) { let granted = false; try { const permission = await navigator.permissions.query({ name: 'window-placement' }); console.log(permission, permission.state); if (permission.state !== 'denied') { return window.getScreenDetails(); } else { return null; } } catch { // Nothing. return null; } } else { return null; } } async function screenDetails() { const screens = await getPermissionAndScreenDetails(); if (screens != null && window.screen.isExtended) { console.log("Multiple screens detected"); try { console.log(screens); let primary; let secondaries = []; for (let element of screens.screens) { if (element.isPrimary) { primary = element; } else { secondaries.push(element); } } console.log('primary: ', primary); console.log('secondaries: ', secondaries); // find secondary screen we can place the popup on const secondary = secondaries[0]; x = secondary.left + (secondary.availWidth / 2) - (width / 2); y = secondary.top + (secondary.availHeight / 2) - (height / 2); let features = "left=" + (second.left + 1000) + ",top=" + (second.top + 400) + ",width=" + width + ",height=" + height; popup = window.open(url, 'Popup', features); } catch (err) { console.error(err); } } else { console.log("Single screen detected (or permission not granted)"); } } document.getElementById("open").addEventListener('click', screenDetails); <button type="button" id="open">Open</button>