JavaScript全屏和退出全屏事件总结(附代码)


Posted in Javascript onAugust 17, 2017

代码如下:

window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态
      window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态
      //跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
      function fullscreenEnable(){
        var isFullscreen = document.fullscreenEnabled ||
        window.fullScreen ||
        document.mozFullscreenEnabled ||
        document.webkitIsFullScreen;
        return isFullscreen;
      }
      //全屏
      var fScreen = function(){
        var docElm = document.documentElement;
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        }
        else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
          ieIsfSceen = true;
        }
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        }
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }else {//对不支持全屏API浏览器的处理,隐藏不需要显示的元素
          window.parent.hideTopBottom();
          isflsgrn = true;
          $("#fsbutton").text("退出全屏");
        }
      }
      //退出全屏
      var cfScreen = function(){
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }else {
          window.parent.showTopBottom();
          isflsgrn = false;
          $("#fsbutton").text("全屏");
        }
      }
      //全屏按钮点击事件
      $("#fsbutton").click(function(){
        var isfScreen = fullscreenEnable();
        if(!isfScreen && isflsgrn == false){
          if (ieIsfSceen == true) {
            document.msExitFullscreen();
            ieIsfSceen = false;
            return;
          }
          fScreen();
        }else{
          cfScreen();
        }
      })
      //键盘操作
      $(document).keydown(function (event) {
        if(event.keyCode == 27 && ieIsfSceen == true){
          ieIsfSceen = false;
        }
      });
      //监听状态变化
      if (window.addEventListener) {
        document.addEventListener('fullscreenchange', function(){ 
          if($("#fsbutton").text() == "全屏"){
            $("#fsbutton").text("退出全屏"); 
          }else{
            $("#fsbutton").text("全屏");
          }
        });
        document.addEventListener('webkitfullscreenchange', function(){ 
          if($("#fsbutton").text() == "全屏"){
            $("#fsbutton").text("退出全屏"); 
          }else{
            $("#fsbutton").text("全屏");
          }
        });
        document.addEventListener('mozfullscreenchange', function(){ 
          if($("#fsbutton").text() == "全屏"){
            $("#fsbutton").text("退出全屏"); 
          }else{
            $("#fsbutton").text("全屏");
          }
        });
        document.addEventListener('MSFullscreenChange', function(){ 
          if($("#fsbutton").text() == "全屏"){
            $("#fsbutton").text("退出全屏"); 
          }else{
            $("#fsbutton").text("全屏");
          }
        });
      }

值得注意的是 fullscreenEnabled 参数,网上的说法不一,有的说是监控浏览器是否进入了可以请求全屏模式的状态,有的说只是一个判断浏览器是否支持全屏的标志,实际使用时也确实出现了问题,IE11不能识别这个属性,需要自己单独设置一个标记来控制IE11当前是否为全屏状态。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
jquery批量控制form禁用的代码
Aug 06 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
js实现抽奖功能
Nov 24 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 #Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 #Javascript
微信小程序 获取session_key和openid的实例
Aug 17 #Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 #Javascript
BootStrap 页签切换失效的解决方法
Aug 17 #Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 #Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 #Javascript
You might like
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php微信支付之APP支付方法
2015/03/04 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
js获取select选中的option的text示例代码
2013/12/19 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python如何进行时间处理
2020/08/06 Python
python 获取字典键值对的实现
2020/11/12 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
员工保密协议书
2014/09/27 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
党员批评与自我批评
2014/10/15 职场文书
企业整改报告范文
2014/11/08 职场文书
听课评课活动心得体会
2016/01/15 职场文书