js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入:

1、当用户点击某按钮,触发iframe下的页面全屏。

2、不允许用户退出全屏。

解决第一点,触发全屏可以按照网上的例子,代码如下:

function fullScreen(){
var elem = parent.$("iframe")[1];//重点在这里,全屏父页面的iframe
//console.log(document == parent.$("iframe")[1].contentWindow.document);
requestFullScreen(elem);
} function requestFullScreen(element) {
console.log(element);
//某个元素有请求
var requestMethod = element.requestFullScreen
||element.webkitRequestFullScreen //谷歌
||element.mozRequestFullScreen //火狐
||element.msRequestFullScreen; //IE11
// console.log(requestMethod);
// console.log(element);
if (requestMethod) {
requestMethod.call(element); //执行这个请求的方法
} else if (typeof window.ActiveXObject !== "undefined") { //window.ActiveXObject判断是否支持ActiveX控件
//这里其实就是模拟了按下键盘的F11,使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
if (wscript !== null) { //创建成功
wscript.SendKeys("{F11}");//触发f11
}
}
}

但是第二点遇到了问题:

1、通过捕获键盘事件,捕获“esc”或者“f11”,不能够阻止退出全屏操作!

估计可能是chrome浏览器默认了esc或f11的操作,这两个键的优先级更高。
所以通过禁用键盘事件,行不通。

2、通过监听屏幕变化事件。

通过

function checkFull() {
var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
return !fullScreen;
}

判断是否是全屏。可行。

理论上通过监听全屏来控制退出没问题:用户退出全屏,继续通过本文的第一段代码,由js恢复全屏。但是现实会提示:该操作必须由用户完成。

可以参考一下文章:http://web.jobbole.com/89098/

做点功能这么困难吗?看来只有曲线救国了~。

这里想到用confirm来提示:

1、如果退出全屏,直接结束本次操作,记录他的错误操作。

2、如果取消退出,用函数恢复全屏。

理想很丰满,现实很骨感。继续出现(由js恢复全屏,会提示:该操作必须由用户完成。)提示。

想到通过自定义confirm来完成,毕竟自定义confirm是通过调用页面隐藏div(包括“确认”,“取消”按钮)来控制的。所以这里浏览器应该会认为是用户操作。

完成功能,提示代码如下:

function requestFullScreen(element) {
//某个元素有请求
var requestMethod = element.requestFullScreen
||element.webkitRequestFullScreen //谷歌
||element.mozRequestFullScreen //火狐
||element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element); //执行这个请求的方法
} else if (typeof window.ActiveXObject !== "undefined") { //window.ActiveXObject判断是否支持ActiveX控件
//这里其实就是模拟了按下键盘的F11,使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
if (wscript !== null) { //创建成功
wscript.SendKeys("{F11}");//触发f11
}
}
} //监听退出全屏事件
window.onresize = function() {
if(checkFull()) {
layer.confirm('退出全屏则***,确定退出吗?', null,
function(){
//dosth
layer.closeAll();
},
function(){
requestFullScreen(parent.$("iframe")[1]);
});
}
} function checkFull() {
var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
return !fullScreen;
}

功能比较low,有大神有其他想法,多交流。

js控制全屏及退出全屏的更多相关文章

  1. JS实现元素的全屏、退出全屏功能

     在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...

  2. div的全屏与退出全屏

    div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...

  3. android开发:全屏和退出全屏

    android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...

  4. js之切换全屏和退出全屏实现

    应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...

  5. js 实现操作浏览器或者元素的全屏与退出全屏功能

    <!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...

  6. Cordova 设置全屏及退出全屏切换

    设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...

  7. Android动态的全屏和退出全屏

    转自:http://chroya.iteye.com/blog/974031 让程序全屏的方法,大家都知道,那是静态的,程序运行之初就申明了.但是如果有这样的需求:要在程序运行的过程中,执行了某个操作 ...

  8. ng2 中的全屏与退出全屏

    1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...

  9. 原生js实现浏览器全屏和退出全屏

    全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...

随机推荐

  1. Python语言学习之Python入门到进阶

    人们常说Python语言简单,编写简单程序时好像也确实如此.但实际上Python绝不简单,它也是一种很复杂的语言,其功能特征非常丰富,能支持多种编程风格,在几乎所有方面都能深度定制.要想用好Pytho ...

  2. 对于新版本的webstorm对vue的支持

    webstorm 对于官方vue的支持,直到2017.1,这个版本,之后的版本不能直接安装vue插件,这时候就需要自己手动新建vue模板了

  3. 20155312 张竞予 Exp3 免杀原理与实践

    Exp3 免杀原理与实践 目录 基础问题回答 (1)杀软是如何检测出恶意代码的? (2)免杀是做什么? (3)免杀的基本方法有哪些? 实验总结与体会 实践过程记录 正确使用msf编码器,msfveno ...

  4. PHP获取时间戳和微秒数以及生成唯一ID

    microtime函数 描述:返回当前Unix时间戳和微秒数 语法:mixed microtime( [ bool $get_as_float ] ) //直接输出 echo microtime(); ...

  5. C重新入门

    推荐书籍:<C专家编程>.<C和指针>.<C陷阱与缺陷> <C专家编程>参看:http://www.ituring.com.cn/article/274 ...

  6. U3D一些使用

    1,UGUI Button同时监听点击事件和长按事件:https://blog.csdn.net/yye4520/article/details/80844870

  7. 利用clonezilla克隆、还原CentOS整个系统

    实现目的:全盘备份CentOS 6.0系统到U盘或者到移动硬盘 操作步骤: 1.制作再生龙镜像启动光盘或U盘,插入到要备份的CentOS 6.0 Linux上面,设置好开机启动(我这里用的是U盘,所以 ...

  8. python 实现rsa 的加密解密存读取(PEM格式证书)【转发】

    来源:CSDN 原文:https://blog.csdn.net/sjt1996/article/details/83377800

  9. 2019浙大校赛--A--Thanks, TuSimple!(简单模拟题)

    这题前三段都是一堆吹爆赞助商的屁话,正式题目在图片下边,一个简单模拟题. 题目大意: 有n个男生,m个女生在进行舞会,其中一部分男生祥和比自己矮的女生跳舞,一部分男生想和比自己高的女生跳舞,一部分女生 ...

  10. STM32CubeMX+Keil裸机代码风格(2)

    10.找到STM32cubeMx所建的工程目录,在工程目录的同级目录下新建一个文件夹用来存放自己写的代码 11.用notepad++打开keil的工程文件,在这里的<Group>前面加上 ...