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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
javascript实现雪花飘落效果
Aug 19 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
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
简单学习vue指令directive
2016/11/03 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
使用原生的javascript来实现轮播图
2017/02/24 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python读写csv文件的方法
2019/08/13 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
django使用JWT保存用户登录信息
2020/04/22 Python
班级活动总结格式
2014/08/30 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
交流会主持词
2015/07/02 职场文书
业务员管理制度范本
2015/08/06 职场文书
Java 数组的使用
2022/05/11 Java/Android