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获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
AngularJS自动表单验证
Feb 01 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python找出最小的K个数实例代码
2018/01/04 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
高山背包:High Sierra
2017/11/23 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
最新奶茶店创业计划书范文
2014/02/08 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
婚前财产公证书
2014/04/10 职场文书
企业活动策划方案
2014/06/02 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python