HTML5實現網頁的全屏切換

本文轉載自查看原文 2016-08-04 13:43 9006 0.developers

　　使用HTML5提供的JavaScript Api可以實現主流瀏覽器的全屏和退出全屏操作，封裝成進入全屏和退出全屏的函數如下：

 1     //進入全屏
 2     function enterFullScreen() {
 3         var de = document.documentElement;
 4         if (de.requestFullscreen) {
 5             de.requestFullscreen();
 6         } else if (de.mozRequestFullScreen) {
 7             de.mozRequestFullScreen();
 8         } else if (de.webkitRequestFullScreen) {
 9             de.webkitRequestFullScreen();
10         }
11     }
12     //退出全屏
13     function exitFullScreen() {
14         var de = document;
15         if (de.exitFullscreen) {
16             de.exitFullscreen();
17         } else if (de.mozCancelFullScreen) {
18             de.mozCancelFullScreen();
19         } else if (de.webkitCancelFullScreen) {
20             de.webkitCancelFullScreen();
21         }
22     }

　　然后將這兩個函數綁定到超鏈接或者按鈕事件上就可以實現瀏覽器的開啟全屏和退出全屏操作

　　簡單的測試頁面代碼如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>全屏切換</title>
 6     <script type="text/javascript">
 7     //進入全屏
 8     function enterFullScreen() {
 9         var de = document.documentElement;
10         if (de.requestFullscreen) {
11             de.requestFullscreen();
12         } else if (de.mozRequestFullScreen) {
13             de.mozRequestFullScreen();
14         } else if (de.webkitRequestFullScreen) {
15             de.webkitRequestFullScreen();
16         }
17     }
18     //退出全屏
19     function exitFullScreen() {
20         var de = document;
21         if (de.exitFullscreen) {
22             de.exitFullscreen();
23         } else if (de.mozCancelFullScreen) {
24             de.mozCancelFullScreen();
25         } else if (de.webkitCancelFullScreen) {
26             de.webkitCancelFullScreen();
27         }
28     }
29     </script>
30 </head>
31 <body>
32     <div>
33         <a href="javascript:;" onclick="enterFullScreen()">進入全屏</a>
34         &nbsp;
35         <a href="javascript:;" onclick="exitFullScreen()">退出全屏</a>
36     </div>
37 </body>
38 </html>

　　當點擊進入全屏時，當前頁面會進入全屏狀態，並且瀏覽器會發出提示

　　當點擊退出全屏時將會退出全屏狀態

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於HTML5全屏圖文左右滑動切換特效 HTML5實現滑動切換 HTML5實現全屏 HTML5實現全屏 js實現網頁全屏切換（平滑過渡），鼠標滾動切換 js之切換全屏和退出全屏實現基於html5和css3響應式全屏滾動頁面切換效果 Android中使用WebView實現全屏切換播放網頁視頻 html5實現全屏的api方法 HTML5實現全屏API【進入和退出全屏】