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實現全屏 js實現網頁全屏切換（平滑過渡），鼠標滾動切換 html 實現tab切換 html5 video播放完切換畫面方案 html5各種頁面切換效果和模態對話框 HTML5實現IP Camera網頁輸出 html5 contenteditable 實現table可編輯（網頁版EXCEL） HTML5全屏(Fullscreen)API詳細介紹百度 flash html5自切換多文件異步上傳控件webuploader基本用法