Display new window fullscreen on second monitor with Javascript

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?

Solution

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>
...