全屏 API 在 elm 中使用端口在 Firefox 中不起作用

Question

我正在使用 elm 中的端口来访问浏览器的全屏 API。在 Chrome 中一切正常，但在 Firefox 中不起作用。我得到的错误是：Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler. 我想我理解错误消息，但是，我希望它能以某种方式工作，因为我确实通过单击按钮访问全屏 API。两者之间只有一个榆树端口。有人解决过这个问题吗？

这是我的榆木代码：

port module Main exposing (..)

import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Html.Attributes exposing (class)


main =
    Html.program { init = init, view = view, update = update, subscriptions = subscriptions }



-- Model


type alias Model =
    { fullscreen : Bool }


init : ( Model, Cmd Msg )
init =
    ( { fullscreen = False }
    , Cmd.none
    )



-- Ports


port activateFullscreen : String -> Cmd msg


port deactivateFullscreen : String -> Cmd msg


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


type Msg
    = FullscreenMode Bool



-- Update


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        FullscreenMode on ->
            let
                m =
                    { model | fullscreen = on }
            in
                if on then
                    ( m, activateFullscreen "" )
                else
                    ( m, deactivateFullscreen "" )



-- views


fullScreenButton : Model -> Html Msg
fullScreenButton model =
    case model.fullscreen of
        False ->
            button [ onClick (FullscreenMode True) ]
                [ text "fullscreen on" ]

        True ->
            button [ onClick (FullscreenMode False) ]
                [ text "fullscreen off" ]


view : Model -> Html Msg
view model =
    div [ class "app" ] [ fullScreenButton model ]

和我的 html 代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Fullscreen Test</title>
  </head>
  <body>
    <div id="main"></div>
    <script src="main.js"></script>
    <script>
      (function () {
        window.onload = function () {
          var node = document.getElementById('main');
          var app = Elm.Main.embed(node);
          app.ports.activateFullscreen.subscribe( function () {
            var element = document.querySelector('.app');
            if (element.requestFullscreen) {
              element.requestFullscreen();
            } else if (element.webkitRequestFullscreen) {
              element.webkitRequestFullscreen();
            } else if (element.mozRequestFullScreen) {
              element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
              element.msRequestFullscreen();
            }
          });
          app.ports.deactivateFullscreen.subscribe( function () {
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
              document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
              document.msExitFullscreen();
            }
          });
        };
      }());
    </script>
  </body>
</html>

Answer 1

正如 bdukes 上面的评论所指出的，这个问题有一个解决方法。我们可以使用放在全局 window 对象上的函数，而不是使用端口进行全屏处理。生成的按钮的 elm 代码如下所示：

button [ onClick (FullscreenMode True), attribute "onClick" "window.enterFullScreen()" ]
    [ text "fullscreen on" ]

我仍然会保留 elm 的 onClick 以更新内部状态。

在 JavaScript 中，我们可以定义 enterFullScreen 函数并在那里处理我们的逻辑：

window.enterFullScreen = function () {
    var element = document.querySelector('.app');
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
};

全屏 API 在 elm 中使用端口在 Firefox 中不起作用

Fullscreen API using ports in elm does not work in Firefox

firefox

fullscreen

elm