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俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
js 窗口抖动示例
Sep 04 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
纯JS代码实现气泡效果
May 04 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
js回调函数原理与用法案例分析
Mar 04 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
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
泛谈JS逻辑判断选择器 || &&
2019/05/24 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python变量和数据类型详解
2017/02/15 Python
django使用LDAP验证的方法示例
2018/12/10 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
详解python读取image
2019/04/03 Python
Python3运算符常见用法分析
2020/02/14 Python
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
新闻专业个人求职信
2013/12/19 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
美德好少年事迹材料
2014/01/19 职场文书
趣味游戏活动方案
2014/02/07 职场文书
党员剖析材料范文
2014/09/30 职场文书
邀请函模板
2015/02/02 职场文书
美术教师求职信范文
2015/03/20 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书