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 入门级学习笔记及源码
Jan 22 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php文件下载处理方法分析
2015/04/22 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
Pyqt5实现英文学习词典
2019/06/24 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python实现磁盘日志清理的示例
2020/11/05 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
高中数学教师求职信
2013/10/30 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
汇源肾宝广告词
2014/03/20 职场文书
装修施工安全责任书
2014/07/24 职场文书
赤壁观后感(2)
2015/06/15 职场文书
党员证明模板
2015/06/19 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
党员反四风学习心得体会
2016/01/22 职场文书