Display new window fullscreen on second monitor with Javascript

Question

I'm trying to make a website application which is going to run some countdowns and etc. I want to be able to start/pause/change my countdowns on the primary screen and show it on the secondary screen.

How do i make a second window appear in fullscreen on the second monitor with javascript and HTML?

Why not let the user do this themselves by opening up a new tab and moving the window? — chazsolo, Apr 24 '19 at 18:41
That was surely for making an evenemential stage timer. You have a window for the techincian where he sets countdown and another for the speaker that is displayed full screen on a monitor at his feet. Some configuration are made such as you can't alway see if the display for the speaker is indeed fullscreen and well displayed. Having had a way to force the full screen would have solved such issues. — Tioneb, Feb 03 '20 at 10:06

score 0 · Accepted Answer · answered Apr 24 '19 at 18:56

Sadly the browser does not give you this exact level of control but it does allow you to send messages between windows.

So for example you could use the postMessage API to send data between your main website and a window that you create for the user to put on another tab and set to full screen (F11 or this)

It would look something like this

File structure

| - index.html
| - timer.html

index.html

...
<script>
var timerTab = window.open('./timer.html', '_blank');
...
timerTab.postMessage(message)
<script>
...

timer.html

...
<script>
window.addEventListener("message", receiveMessage, false);

// handle messages from the controlling page
function receiveMessage(event) {
  if (event.origin !== "http://example.org:8080") // check that it is coming from your site and not somewhere else...
    return;
  // ...
}
<script>
...

Display new window fullscreen on second monitor with Javascript

1 Answers1