Javascript实现打开或退出浏览器全屏

废话不多说，直接上代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5   <title>Document</title>
 6 </head>
 7 <body>
 8   <button id="open">全屏展示</button>
 9   <button id="close">退出全屏</button>
10   <script type="text/javascript">
11     var open = document.getElementById('open');
12     var exit = document.getElementById('close');
13 
14     function openFullScreen() {
15       var docElm = document.documentElement;
16       // W3C
17       if (docElm.requestFullscreen) {
18         docElm.requestFullscreen();
19       }
20       // FireFox
21       else if (docElm.mozRequestFullScreen) {
22         docElm.mozRequestFullScreen();
23       }
24       // Chrome等
25       else if (docElm.webkitRequestFullScreen) {
26         docElm.webkitRequestFullScreen();
27       }
28       // IE11
29       else if (elem.msRequestFullscreen) {
30         elem.msRequestFullScreen();
31       }
32     }
33 
34     function exitFullScreen() {
35       if (document.exitFullscreen) {
36         document.exitFullscreen();
37       } else if (document.mozCancelFullScreen) {
38         document.mozCancelFullScreen();
39       } else if (document.webkitCancelFullScreen) {
40         document.webkitCancelFullScreen();
41       } else if (document.msExitFullscreen) {
42         document.msExitFullscreen();
43       }
44     }
45     open.addEventListener('click', openFullScreen, false);
46     exit.addEventListener('click', exitFullScreen, false);
47   </script>
48 </body>
49 </html>

 

posted @ 2016-02-19 09:56  路杰2015  阅读(216)  评论(0)  编辑  收藏  举报