使用 Javascript 在第二台显示器上全屏显示新窗口

【问题标题】：Display new window fullscreen on second monitor with Javascript使用 Javascript 在第二台显示器上全屏显示新窗口
【发布时间】：2020-07-15 23:51:32
【问题描述】：

我正在尝试制作一个网站应用程序，它将运行一些倒计时等。我希望能够在主屏幕上启动/暂停/更改我的倒计时并将其显示在辅助屏幕上。

如何使用 javascript 和 HTML 在第二台显示器上全屏显示第二个窗口？

【问题讨论】：

为什么不让用户自己打开一个新标签并移动窗口呢？
那肯定是为了制作一个平衡的舞台计时器。您有一个窗口供技术人员设置倒计时，另一个用于扬声器，在他脚下的监视器上全屏显示。进行了一些配置，例如您无法始终查看扬声器的显示是否确实是全屏且显示良好。有办法强制全屏会解决这些问题。

标签： javascript html

【解决方案1】：

遗憾的是，浏览器并没有为您提供这种精确级别的控制，但它确实允许您在窗口之间发送消息。

例如，您可以使用postMessage API 在您的主网站和您为用户创建的窗口之间发送数据，以便用户放在另一个选项卡上并设置为全屏（F11 或this）

看起来像这样

文件结构

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

【讨论】：