Question

我在elm中使用port来访问浏览器的全屏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上面的评论所指出的，这个问题有一个解决方法。我们可以使用放在全局窗口对象上的函数，而不是使用端口进行FullScreen处理。由此产生的按钮的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();
    }
};

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

1 个答案: