我正在使用 elm 中的端口来访问浏览器的全屏 API。在 Chrome 中一切正常，但在 Firefox 中不起作用。我得到的错误是:全屏请求被拒绝，因为 Element.mozRequestFullScreen() 不是从短时间运行的用户生成的事件处理程序中调用的。
我想我理解错误消息，但是，我希望它能以某种方式工作，因为我确实通过单击按钮访问了全屏 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>
最佳答案
作为bdukes上面的评论指出，这个问题有一个解决方法。 我们可以使用放在全局窗口对象上的函数，而不是使用端口进行全屏处理。 生成的按钮的 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();
}
};
关于firefox - 在 elm 中使用端口的全屏 API 在 Firefox 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43240352/