实现方案

//进入全屏
function requestFullScreen(de) {
if(de.requestFullscreen){
//W3C
de.requestFullscreen();
}else if (de.mozRequestFullScreen){
//FIREFOX
de.mozRequestFullScreen();
}else if (de.webkitRequestFullScreen){
//CHROME
de.webkitRequestFullScreen();
}else if (de.msRequestFullscreen){
//MSIE
de.msRequestFullscreen();
}else if(element.oRequestFullscreen){
element.oRequestFullscreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('playerBox');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;
}
}
//退出全屏
function exitFullscreen(de) {
if (de.exitFullscreen) {
//W3C
de.exitFullscreen();
}else if(de.mozCancelFullScreen){
//FIREFOX
de.mozCancelFullScreen();
}else if(de.webkitCancelFullScreen){
//CHROME
de.webkitCancelFullScreen();
}else if(de.msExitFullscreen){
//MSIE
de.msExitFullscreen();
}else if(de.oRequestFullscreen){
de.oCancelFullScreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('playerBox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}

上面的方案,一堆if...else...,看起来实在不爽,下面是根据大神方案优化后的方案

//全屏功能
document.getElementById("ck_buts").onclick = function() {
var elem = document.getElementById("dashboard_id");
elem.style.width = "100%";
elem.style.height = "100%";
elem.style.overflowY = "scroll";
requestFullScreen(elem); // 某个页面元素
//requestFullScreen(document.documentElement); // 整个网页
}; function requestFullScreen(element) {
// 判断各种浏览器,找到正确的方法
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //FireFox
element.mozRequestFullScreen || //Chrome等
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏 判断浏览器种类 function exitFull() {
// 判断各种浏览器,找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //FireFox
document.webkitExitFullscreen || //Chrome等
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
} }

监听退出全屏事件

//监听退出全屏事件
window.onresize = function() {
if (!checkFull()) {
//要执行的动作
$("#dashboard_id").removeClass('expand').addClass('contract');//这里捡个懒,直接用JQ来改className
}
}
function checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
//to fix : false || undefined == undefined
if (isFull === undefined) {isFull = false;}
return isFull;
}

JS控制全屏,监听退出全屏事件的更多相关文章

  1. JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签  注意点:form ...

  2. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  3. iOS 多个播放器同时播放,双击全屏,单击退出全屏

    前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...

  4. H5视频播放自动全屏,暂停退出全屏等功能

    html5视频播放自动全屏,暂停退出全屏等功能 在参考了html5 video fullScreen全屏实现方式及司徒正美的书<javascript框架设计>287页相关代码后,在Safa ...

  5. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  6. iOS开发——锁屏监听

    公司所做的项目,锁屏监听是为了60秒后,解锁瓶后显示[手势解锁]或[指纹验证]: 第一步:AppDelegate.m 头部导入 #import <notify.h> #define Not ...

  7. js与jquery实时监听输入框值变化方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  8. Android初级教程使用服务注册广播接收者监听手机解锁屏变化

    之前第七章广播与服务理论篇写到: 特殊的广播接收者(一般发广播次数频率很高) 安卓中有一些广播接收者,必须使用代码注册,清单文件注册是无效的 屏幕锁屏和解锁 电量改变 今天在这里就回顾一下,且用代码方 ...

  9. js判断是否安装某个android app,没有安装下载该应用(websocket通信,监听窗口失去焦点事件)

    现在经常有写场景需要提示用户下载app, 但是如果用户已经安装,我们希望是直接打开app. 实际上,js是没有判断app是否已经安装的方法的,我们只能曲线救国. 首先,我们需要有call起app的sc ...

随机推荐

  1. SharePoint 2013 关闭 customErrors

    在SharePoint 2013上做开发时,如果不把customErrors 关掉,那调试起来那真叫一个费劲.在2013里,关闭customErrors 和2010一样,只要把文件路径改成15目录下即 ...

  2. 【你你你你在开玩笑吧】什么叫凭借纯兴趣搞ACM?涨姿势了

        好长时间不扯淡了,今天扯个玩玩,吐个槽.     在上海回济南的列车上,回顾起这两天在携程codingtrip颁奖仪式上大牛们的种种心得,姿势涨了不少,着实涨了不少啊.我这样的渣渣毕竟图样图森 ...

  3. 怎样利用WordPress创建自己定义注冊表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  4. 零基础学python-2.17 文件、open()、file()

    今天我们来说说文件,以及跟文件有关的内建函数open和file 首先我们在python的根文件夹下建一个名为"123"的txt文本文件 文件中面我们输入一些文本 watermark ...

  5. ArcGis空间参考的设置

    ArcGis10.0空间参考设置: 选择一个数据右击,进入属性properties 点击进入后则出现以下界面 双击进入后则出现以下界面 双击进入后出现如下界面,此时则可选择需要设置的空间参考 ArcG ...

  6. DNS隐蔽通道 是可以通过dig 子域名来追踪其真实IP的

    比如a.friendskaka.com 是我的外发子域名,那么可以按照下面两个命令来追踪IP: bonelee@bonelee-VirtualBox:~/桌面$ dig auth.a.friendsk ...

  7. Gym - 101981A The 2018 ICPC Asia Nanjing Regional Contest A.Adrien and Austin 简单博弈

    题面 题意:一堆有n个石子,编号从1⋯N排成一列,两个人Adrien 和Austin玩游戏,每次可以取1⋯K个连续编号的石子,Adrien先手,谁不能取了则输 题解:k==1时,显然和n奇偶相关,当k ...

  8. C#发送电子邮件代码记录

    /// <summary> /// 发送电子邮件 /// </summary> /// <param name="Address">邮件地址&l ...

  9. Oracle_exp/expdp备份

    目录索引 1.exp和expdp的区别 2.expdp导出数据库流程 一.↓↓exp和expdp的区别↓↓ 1.exp和expdp最明显的区别就是导出速度的不同.expdp导出是并行导出(如果把exp ...

  10. 【python】数组去重

    直接用set就行,比如: l = [1, 1, 2, 2, 3, 4, 5] s = set(l) c = [i for i in s] print c 结果为: [1, 2, 3, 4, 5] 其中 ...