0

the code below, would be used to generate a link, which should open on a second monitor. The problem exists in the popup that is generated with the "screenDetails()" method: despite having defined coordinates, the browser page, remains stuck in the screen where the link is clicked. Do you have any ideas?

<html>
<title>test</title>

<head>

    <script type="text/javascript">
        let url = "http://google.com";
        let x = "1000";
        let y = "250";
        let width = "800";
        let height = "600";
        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') {
                        console.log(JSON.stringify(await window.getScreenDetails()))
                        return await 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: ', JSON.stringify(secondaries));

                    const secondary = secondaries[1];
                    x = secondary.left + (secondary.availWidth / 2) - (width / 2);
                    y = secondary.top + (secondary.availHeight / 2) - (height / 2);


                    let features = "left=" + (secondary.left + 1000) + ",top=" + (secondary.top + 400) +
                        ",width=" + width + ",height=" + height;

                    popup = window.open(url, 'Popup', features);
                    popup.moveTo(secondaries, 1);

                } catch (err) {
                    console.error(err);
                }

            } else {

                console.log("Single screen detected (or permission not granted)");
                window.alert("Single screen detected (or permission not granted)");
            }
            console.log(JSON.stringify(screens));
        }
    </script>
</head>

<body>
    <button type="button" id="open" onclick="screenDetails()">Open</button>
</body>

</html>
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
Chris
  • 1
  • 2

1 Answers1

0

The opener window may actually be on the secondary screen selected by the code. The script might be running in an iframe without the 'window-management' permission policy, even if the main frame has permission. For me, this works if I place the opener on my primary screen and set const secondary = secondaries[0];, since the device I'm using only has two screens (the primary, and one secondary). This looks related to Can not get Multi-Screen Window Placement to work. I just posted an answer there, test it at https://husky-imaginary-sale.glitch.me/

<button id="popup">Open popup on another screen</button>
<div id="logger"></div>

<script>
function log(text) {
  console.log(text);
  logger.innerText += text + '\n';
}

popup.addEventListener('click', async () => {
  try {
    window.screenDetails = await window.getScreenDetails();
  } catch {}
  if (!window.screenDetails) {
    log('API not supported or permission denied, skipping popup');
    return;
  }
  if (!window.screenDetails.screens.length > 1) {
    log('Single screen detected, skipping popup');
    return;
  }
  const other = window.screenDetails.screens.find(s=>s!=window.screenDetails.currentScreen);
  const width = 300;
  const height = 300;
  const left = other.availLeft + (other.availWidth / 2) - (width / 2);
  const top = other.availTop + (other.availHeight / 2) - (height / 2);
  const features = `left=${left},top=${top},width=${width},height=${height}`;
  log(`Opening popup with features: '${features}'`);
  window.open('about:blank', 'Popup', features);
});
</script>
Mike Wasserman
  • 1
  • 2