个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 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/
25
4
0
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？ 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀！