Question

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

如何使用javascript和HTML在第二个监视器上以全屏方式显示第二个窗口？

Answer 1

可悲的是，浏览器没有给您这种精确的控制级别，但允许您在Windows之间发送消息。

例如，您可以使用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>
...

Answer 2

Presentation API可以做到这一点。

presentation.html

<!DOCTYPE html>
<html>

<head>
    <title>Presentation</title>
</head>

<body>

    <p>Stuff to be presented</p>

</body>

</html>

index.html


<!DOCTYPE html>
<html>

<head>
    <title>Controller</title>
</head>

<body>

    <button id="presentBtn" style="display: none;">Present</button>
    <button id="stopBtn" style="display: none;">Stop</button>

</body>

</html>

<script>

    //controller page script

    var presentBtn = document.getElementById("presentBtn");

    var presUrls = ["https://YOUR_DOMAIN/presentation.html"];

    var handleAvailabilityChange = function (available) {
        presentBtn.style.display = available ? "inline" : "none";
    };


    var request = new PresentationRequest(presUrls);
    request.getAvailability().then(function (availability) {

        handleAvailabilityChange(availability.value);
        availability.onchange = function () { handleAvailabilityChange(this.value); };
    }).catch(function () {

        handleAvailabilityChange(true);
    });


    presentBtn.onclick = function () {

        request.start()

            .then(setConnection);

    };

    var reconnect = function () {

        var presId = localStorage["presId"];

        if (!!presId) {
            request.reconnect(presId)

                .then(setConnection);
        }
    };

    document.addEventListener("DOMContentLoaded", reconnect);

    navigator.presentation.defaultRequest = new PresentationRequest(presUrls);
    navigator.presentation.defaultRequest.onconnectionavailable = function (evt) {
        setConnection(evt.connection);
    };

    let connection;

    const stopBtn = document.querySelector("#stopBtn");

    stopBtn.onclick = _ => {
        connection && connection.terminate();
    };


    function setConnection(newConnection) {
        if (connection && connection != newConnection && connection.state != 'closed') {
            connection.onclosed = undefined;
            connection.close();
        }

        connection = newConnection;
        localStorage["presId"] = connection.id;

        function showConnectedUI() {
            stopBtn.style.display = "inline";
            presentBtn.style.display = "none";

        }

        function showDisconnectedUI() {
            stopBtn.style.display = "none";
            presentBtn.style.display = "inline";
        }

        connection.onconnect = _ => {
            showConnectedUI();


            connection.onterminate = _ => {
                delete localStorage["presId"];
                connection = null;
                showDisconnectedUI();
            };
        };
    };

</script>

https://w3c.github.io/presentation-api/#examples

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

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

2 个答案: