CODEWITHSUNDEEP
javascriptmultiple-monitorspresentation-api
Wolfgang Fahl
Wolfgang Fahl

Reputation: 15769

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

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

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.

Upvotes: 6

Views: 5488

Answers (2)

Amy Groshek
Amy Groshek

Reputation: 808

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/

Upvotes: 4

Wolfgang Fahl
Wolfgang Fahl

Reputation: 15769

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

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

Example in english Example in german

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

Upvotes: 5

Related Questions