一、简介
浏览器全屏有两种方式，一种是HTML5新增的requestFullscreen全屏，另一种是摁F11实现的全屏，本文将详解两种全屏的特点以及其实现。
二、requestFullscreen全屏
1、判断是否支持全屏
通过判断元素的requestFullscreen函数是否存在与document.fullscreenEnabled是否为True判断浏览器是否支持全屏或启用全屏，兼容写法为
1 function supportfull(){
2 var requestFullscreen =
3 document.body.requestFullscreen ||
4 document.body.webkitRequestFullscreen ||
5 document.body.mozRequestFullScreen ||
6 document.body.msRequestFullscreen;
7 var fullscreenEnabled =
8 document.fullscreenEnabled ||
9 document.mozFullScreenEnabled ||
10 document.webkitFullscreenEnabled ||
11 document.msFullscreenEnabled;
12 return !!(requestFullscreen && fullscreenEnabled);
13 }
注意，requestFullscreen方法不存在于document对象上，并且注意字母s的大小写
2、进入全屏
通过调用元素的requestFullscreen方法是元素进入全屏，使用时应注意：
（1）requestFullscreen在document对象上没有定义。
（2）requestFullscreen方法只能由用户操作触发（如onclick事件），在onload事件中调用此方法将无效。
（3）当一个元素全屏时，再让其子元素全屏是无效的，必须先退出全屏。
（4）返回或跳转页面将退出全屏。
（5）进入全屏的元素其父元素将不再是全屏之前的父元素，此时之前的css可能失效。
下面给出，进入全屏的JS代码的兼容写法：
1 function full(el) {
2 if (el.requestFullscreen) {
3 el.requestFullscreen();
4 } else if (el.mozRequestFullScreen) {
5 el.mozRequestFullScreen();
6 } else if (el.webkitRequestFullscreen) {
7 el.webkitRequestFullscreen();
8 } else if (el.msRequestFullscreen) {
9 el.msRequestFullscreen();
10 }
11 }
3、获取当前进入全屏的而元素
通过document.fullscreenElement方法获取当前全屏的元素，假设d为div1的Element当前i为全屏状态则 div1===document.fullscreenElement，以下是获取当前全屏元素的兼容写法：
1 function fullele() {
2 return(
3 document.fullscreenElement ||
4 document.webkitFullscreenElement ||
5 document.msFullscreenElement ||
6 document.mozFullScreenElement ||
7 null);
8 }
4、判断当前是否全屏
通过document.fullscreenElement属性是否为空来判断，对于webkit内核的浏览器，还可以通过document.webkitIsFullScreen属性来判断，以下为兼容写法：
1 function isfull() {
2 return !!(document.webkitIsFullScreen || fullele());
3 }
5、退出全屏
通过document.exitFullscreen方法来退出全屏，对于不同内核的浏览器，方法名除了前缀不一样外，其他地方也不一样，以下为兼容写法
1 function exitfull() {
2 if (document.exitFullscreen) {
3 document.exitFullscreen();
4 }
5 else if (document.mozCancelFullScreen) {
6 document.mozCancelFullScreen();
7 }
8 else if (document.webkitExitFullscreen) {
9 document.webkitExitFullscreen();
10 }
11 else if (document.msExitFullscreen) {
12 document.msExitFullscreen();
13 }
14 }
6、jQuery拓展，写成jQuery拓展，调用将十分方便，下面将给出一个实现：
1 $.extend({
2 supportfull: function () {
3 var requestFullscreen =
4 document.body.requestFullscreen ||
5 document.body.webkitRequestFullscreen ||
6 document.body.mozRequestFullScreen ||
7 document.body.msRequestFullscreen;
8 var fullscreenEnabled =
9 document.fullscreenEnabled ||
10 document.mozFullScreenEnabled ||
11 document.webkitFullscreenEnabled ||
12 document.msFullscreenEnabled;
13 return !!(requestFullscreen && fullscreenEnabled);
14 },
15 //获取当前全屏的元素
16 fullele: function () {
17 return(
18 document.fullscreenElement ||
19 document.webkitFullscreenElement ||
20 document.msFullscreenElement ||
21 document.mozFullScreenElement ||
22 null);
23 },
24 //全屏，如果当前存在已经全屏的元素，则操作无效
25 full: function (el) {
26 if ($.isfull()) {
27 if (el === $.fullele()) {
28 return;
29 }
30 }
31 if (el.requestFullscreen) {
32 el.requestFullscreen();
33 } else if (el.mozRequestFullScreen) {
34 el.mozRequestFullScreen();
35 } else if (el.webkitRequestFullscreen) {
36 el.webkitRequestFullscreen();
37 } else if (el.msRequestFullscreen) {
38 el.msRequestFullscreen();
39 }
40 return this;
41 },
42 //退出全屏
43 exitfull: function () {
44 if (document.exitFullscreen) {
45 document.exitFullscreen();
46 }
47 else if (document.mozCancelFullScreen) {
48 document.mozCancelFullScreen();
49 }
50 else if (document.webkitExitFullscreen) {
51 document.webkitExitFullscreen();
52 }
53 else if (document.msExitFullscreen) {
54 document.msExitFullscreen();
55 }
56 return this;
57 },
58 //是否全屏
59 isfull: function () {
60 return !!(document.webkitIsFullScreen || $.fullele());
61 },
62 //进入或取消全屏，如果当前全屏的元素不是指定的元素，则取消全屏无效
63 togglefull: function (el, callback) {
64 if ($.isfull()) {
65 var fullele = $.fullele();
66 if (el === fullele) {
67 $.exitfull();
68 }
69 return;
70 }
71 $.full(el);
72 if (typeof callback == typeof $.noop) {
73 callback(!$.isfull());
74 }
75 return this;
76 }
77 })
78 $.fn.extend(
79 {
80 // 让匹配的第一个元素全屏
81 // 该方法应有用户操作触发，否则无效
82 full: function () {
83 if ($(this).length == 0)
84 return;
85 $.full(el);
86 return this;
87 },
88 // 如果当前全屏的元素存在于匹配的元素集合中，则该元素会退出全屏
89 exitfull: function () {
90 if (isfull()) {
91 var fullel = $.fullel();
92 var index = $(this).index(fullel);
93 if (index != -1) {
94 $.exitfull();
95 }
96 }
97 return this;
98 },
99 // 该方法应由用户操作触发，只对匹配的第一个元素有效
100 togglefull: function (callback) {
101 if ($(this).length > 0) {
102 var el = $(this).first().get(0);
103 $.togglefull(el, callback);
104 }
105 return this;
106 },
107 // 为元素绑定点击事件，以使点击的元素进入或退出全屏
108 fullable: function (callback) {
109 $(this).on("click", function (e) {
110 $(this).togglefull(callback);
111 });
112 return this;
113 },
114 });
二、F11全屏
1、未完待续。。。
原文地址：https://www.cnblogs.com/netgrace/p/js-fullscreen.html
时间： 2024-08-24 00:33:46