js實現視窗全屏示例
阿新 • • 發佈：2018-11-29
前言
- 該 demo 包含全屏事件、退出全屏事件以及螢幕狀態改變的鉤子函式的封裝
- 以下是一個完整示例，只需整體拷貝下來執行即可(注意引入了 jquery)
- 請在這裡檢視示例☞ fullscreen示例
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery-1.11.3.min.js"></script> <style> * { margin: 0; padding: 0; } /* 視窗全屏樣式 */ html:-moz-full-screen { background: grey; } html:-webkit-full-screen { background: grey; } html:fullscreen { background: grey; } div { width: 100px; height: 100px; background: blue; } img { width: 80px; height: 80px; } </style> </head> <body> <button class="win-fullscreen">視窗全屏</button> <button class="div-fullscreen">div全屏</button> <button class="img-fullscreen">img全屏</button> <button class="exit-fullscreen">退出全屏</button> <div class="div"> <img class="img" src="images/a.png"> </div> </body> <script> /* 呼叫示例 */ // 視窗全屏 $('.win-fullscreen').on('click', function() { requestFullScreen(document.documentElement); }); // div全屏 $('.div-fullscreen').on('click', function() { requestFullScreen($('.div')[0]); }); // img全屏 $('.img-fullscreen').on('click', function() { requestFullScreen($('.img')[0]); }); // 退出全屏 $('.exit-fullscreen').on('click', function() { exitFull(); }); // 視窗狀態改變事件 fullscreenchange(document, function(isFull) { console.log(isFull); }); /* 封裝 */ // 視窗狀態改變 function fullscreenchange(el, callback) { el.addEventListener("fullscreenchange", function () { callback && callback(document.fullscreen); }); el.addEventListener("webkitfullscreenchange", function () { callback && callback(document.webkitIsFullScreen); }); el.addEventListener("mozfullscreenchange", function () { callback && callback(document.mozFullScreen); }); el.addEventListener("msfullscreenchange", function () { callback && callback(document.msFullscreenElement); }); } // 全屏 function requestFullScreen(element) { var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } //退出全屏 function exitFull() { var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } </script> </html>
參考文章
--------------------- 本文來自 vcxiaohan2 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/u011500781/article/details/52896368?utm_source=copy