js实现窗口全屏示例详解

时间：2021-05-26

前言

该 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>

参考文章

用html5 js实现点击一个按钮达到浏览器全屏效果

Native Fullscreen JavaScript API (plus jQuery plugin)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章