全屏API的一些使用经验。可用

2018.2.2 星期五 15:28

A Fullscreen API：全屏操作

http://javascript.ruanyifeng.com/htmlapi/fullscreen.html

一方法

1.1 requestFullscreen()

function launchFullscreen(element) {
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.msRequestFullscreen){
        element.msRequestFullscreen();
    } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
    }
}
launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("videoElement"));

放大一个节点时，Firefox和Chrome在行为上略有不同。Firefox自动为该节点增加一条CSS规则，将该元素放大至全屏状态，width: 100%; height: 100%，而Chrome则是将该节点放在屏幕的中央，保持原来大小，其他部分变黑。为了让Chrome的行为与Firefox保持一致，可以自定义一条CSS规则。

:-webkit-full-screen #myvideo {
    width: 100%;
    height: 100%;
}

2.2 exitFullscreen

function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}
exitFullscreen();

用户手动按下ESC键或F11键，也可以退出全屏键。此外，加载新的页面，或者切换tab，或者从浏览器转向其他应用（按下Alt-Tab），也会导致退出全屏状态。

二属性

2.1 document.fullscreenElement

var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;

2.2 document.fullscreenEnabled

var fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;

if (fullscreenEnabled) {
    videoElement.requestFullScreen();
} else {
    console.log('浏览器当前不能全屏');
}

三事件

3.1 fullscreenchange

document.addEventListener("fullscreenchange", function( event ) {
    if (document.fullscreenElement) {
        console.log('进入全屏');
    } else {
        console.log('退出全屏');
    }
});

3.2 fullscreenerror事件：浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。

四全屏状态的CSS

大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。

:-webkit-full-screen {
    /* properties */
}

:-moz-full-screen {
    /* properties */
}

:-ms-fullscreen {
    /* properties */
}

:full-screen { /*pre-spec */
    /* properties */
}

:fullscreen { /* spec */
    /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
    width: 100%;
    height: 100%;
}

五参考链接

B JavaScript请求全屏是不可靠的

http://codewa.com/question/111719.html

除了谷歌，全屏请求都是由用户操作出发的，只能响应用户操作，比如，点击,key等。不能通过代码触发

火狐可以通过更改浏览器设置，也可以相应代码的全屏请求。

about://config
full-screen-api.allow-trusted-requests-only---------false

2.2 16:28

Z 实际

一 play.asp,aculive.php/acuviewer.php

1.1 要点

嵌套iframe，play.asp ,aculive.php
1. 同源：子页面可以操作了父页面元素，控制全屏
2. 跨域：上面方法不可行。通过postmessage传递事件（$_PS: 参考跨域操作.md）
  chrome可以通过代码触发全屏；其他不会，ff可以更改浏览器设置；
  检测到全屏元素undefined，触发player的全屏事件（最后的else是不会进入的，因为是浏览器的设置z阻止了全屏事件，而不是API差异）
ios系统（iPhone，iPad）不支持该API，safari浏览器可以
全屏聊天，弹窗
1. prompt选择后，退出全屏。
2. alert没试过，是不是会立即退出。待确定
全屏聊天时，移动设备键盘弹出时，没有事件监听，也无法获得键盘高度，so无法调整输入框刚好在键盘上面

2.2 19:19

2018.2.8 四 11:30

1.2 SMTC

见：全屏API

1.3 键盘事件

1 F11 不会响应

按下F11：document.webkitIsFullScreen=false。
document.onfullscreenchange也监听不到

2 Esc

document.onfullscreenchange可以检测到

该网址也一样：
https://www.ispringsolutions.com/ispring-quizmaker/demos

2.8 12:08

# C jQuery制作Web全屏效果
作者：大漠日期：2012-03-20
https://www.w3cplus.com/jquery/create-your-website-fullscreen-with-jquery
$_PS: jQuery插件

其它：
# D [Javascript 开启浏览器全屏模式]