What needs to be done to make multiple screen support for Javascript happen?

Question

As I was wondering about the multi-monitor/screen support of javascript i found the follwing stackexchange questions relevant for the topic:

• 2013 - 40k views: window.open() on a multi-monitor/dual-monitor system - where does window pop up?
• 2014 - 10 k views: window.open on second monitor
• 2016 - 42 views: How to show a webpage onto another monitor connected to it on click of a button?
• 2008 - 11 k views: Testing for multiple screens with javascript
• 2017 - ~1k views: https://webmasters.stackexchange.com/questions/103269/auto-open-fullscreen-on-another-monitor

Quite a few of the questions and answers revolve around the missing option of handling multiple screens with javascript. Security and technical reasons are named to account for the non-existence of such a feature.

On the other hand a few thousand views show that there is interest in the topic and people have tried work-arounds for many years.

So i second I want to automate that process so as soon as they load the first address, a second window automatically pops up on the second monitor and fullscreens itself. This is internal only and will be expected behaviour. from the webmasters.stackexchange question and i would like to know what needs to be done to get this feature?

E.g. would the HTML standard have to be changed see e.g. question from 2014 on code project - would the browser vendors have to do something? Would there be a need for a Javascript addition to e.g. What information can we access from the client? And what would be the actions to get a solution up and running?

And by the way - if you think this is off-topic how would I have to change my question so that it won't be closed. I am very serious about this - there is a need behind this that I have seen quite a few times already.

Answer 1

Since Version 66 of Chrome it is possible to use the Presentation API There is a W3C Draft for it since 2019-04

The Example at

• https://googlechrome.github.io/samples/presentation-api/

will work in Chrome 66+ and given an error message

ReferenceError: PresentationRequest is not defined (Your browser may not support this feature.)

for other browsers when clicking presentationRequest.start(). On Chrome 66+ a selection dialog appears

and after picking the desired screen is used in full screen mode.

Answer 2

screen.isExtended is true if there are one or more additional displays.

window.getScreenDetails returns an object including an array of screens, with dimensions and position. The left value for your non-primary screen would be what to target to move a new window to that screen.

const doSetup = async () => {
  const screenDetails = await window.getScreenDetails()
  if (screen.isExtended && screenDetails.screens.length > 1) {
    const newChildWindow = window.open(
      url,
      'New Child Window',
      `popup,width=${800},height=${600},left=0,top=0`
    )
    newChildWindow.moveTo(screenDetails.screens[1].left, 0)
  }
}

Very thorough explanation here: https://web.dev/multi-screen-window-placement/