js实现窗口全屏示例详解
2019-09-17 16:57
1581 查看
前言
该 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)
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- js实现窗口全屏示例
- JS实现全屏预览F11功能的示例代码
- JS实现弹出居中的模式窗口示例
- JS实现DIV高度自适应窗口示例
- JS简单实现父子窗口传值功能示例【未使用iframe框架】
- JS简单实现浮动窗口效果示例
- JS实现指定区域的全屏显示功能示例
- JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
- 进入全屏 nodejs+express+mysql实现restful风格的增删改查示例
- Windows Forms 实现安全的多线程详解(附带程序代码示例) (摘自网络)
- JS实现弹出可移动的层,窗口,提示框(可自定弹出层的标题和内容)
- Js + Css的msn式的popup提示窗口的实现
- MSN弹出式消息提示窗口的JS实现
- IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
- 一个frameset框架的页面,关闭窗口调用js的实现
- 实现浏览器全屏窗口的方法
- MSN弹出式窗口popup的JS实现及GridView导出Excel 〔转载〕
- Js + Css的msn式的popup提示窗口的实现
- 实现真正的非全屏窗口和自定义消息对话框
- JS实现制作弹出小窗口并获取参数值1(用JS制作9种弹出小窗口(HTML))