這篇文章主要爲大家詳細介紹了js實現窗口全屏示例,包含全屏事件、退出全屏事件等,具有一定的參考價值,感興趣的小夥伴們可以參考一下
前言
該 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>
參考文章
Native Fullscreen JavaScript API (plus jQuery plugin)
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。