当前位置: 首页 » 前端开发 » JS全屏浏览和退出全屏
 |  全屏浏览  |  字号调整:

JS全屏浏览和退出全屏

2017-04-01 13:48:32 前端开发 0 552 百度已收录
本文最后更新于2017-04-01,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:10月20日 - 1962年,中印边境自卫反击战爆发

周六下午好, 本文除去代码部分,共1474个字,预计阅读时间需要4分钟。

最近项目中需要实现浏览器的全屏浏览功能,于是便有了下文… [好吧,我承认这开场白有点low啊,低调低调·“]

MDN:全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式。这种API让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。

属性

document.fullscreen
用于检测当前文档是否处于全屏模式,返回值为布尔类型

document.fullscreenElement
当前激活全屏模式的元素

document.fullscreenEnabled
当前文档是否支持全屏

兼容性,如下图:

具体JS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
(function(a, b) {
    "use strict";
    var c = function() {
        var a = [["requestFullscreen", "exitFullscreen", "fullscreenchange", "fullscreen", "fullscreenElement"], ["webkitRequestFullScreen", "webkitCancelFullScreen", "webkitfullscreenchange", "webkitIsFullScreen", "webkitCurrentFullScreenElement"], ["mozRequestFullScreen", "mozCancelFullScreen", "mozfullscreenchange", "mozFullScreen", "mozFullScreenElement"]];
        for (var c = 0,
                 d = a.length; c < d; c++) {
            var e = a[c];
            if (e[1] in b) return e
        }
    } ();
    if (!c) return a.screenfull = !1;
    var d = "ALLOW_KEYBOARD_INPUT" in Element,
        e = {
            init: function() {
                return b.addEventListener(c[2],
                    function(a) {
                        e.isFullscreen = b[c[3]],
                            e.element = b[c[4]],
                            e.onchange(a)
                    }),
                    this
            },
            isFullscreen: b[c[3]],
            element: b[c[4]],
            request: function(a) {
 
                a = a || b.documentElement,
                    a[c[0]](d && Element.ALLOW_KEYBOARD_INPUT),
                b.isFullscreen || a[c[0]]();
            },
            exit: function() {
                b[c[1]]()
            },
            toggle: function(a) {
                this.isFullscreen ? this.exit() : this.request(a)
            },
            onchange: function() {}
        };
    a.screenfull = e.init()
})(window, document);

调用方法:

1
2
3
4
5
6
 
//全屏
screenfull && screenfull.request();
 
//退出全屏
screenfull && screenfull.exit();

注意:

Gecko会自动为进入全屏模式的元素添加额外样式:width: 100%; height: 100%; ,目的是使其铺满整个屏幕;而webkit没有这种默认行为,所以需要我们手动补充这个样式。

1
2
3
4
#video:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

好了,本篇完。

本文标题:JS全屏浏览和退出全屏

本文地址:http://www.hehaibao.com/js-fullscreen/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

电子邮件地址不会被公开。 必填项已用*标注