js控制全屏及退出全屏
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控制全屏及退出全屏的更多相关文章
- JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...
- div的全屏与退出全屏
div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...
- android开发:全屏和退出全屏
android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...
- js之切换全屏和退出全屏实现
应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...
- js 实现操作浏览器或者元素的全屏与退出全屏功能
<!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...
- Cordova 设置全屏及退出全屏切换
设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...
- Android动态的全屏和退出全屏
转自:http://chroya.iteye.com/blog/974031 让程序全屏的方法,大家都知道,那是静态的,程序运行之初就申明了.但是如果有这样的需求:要在程序运行的过程中,执行了某个操作 ...
- ng2 中的全屏与退出全屏
1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...
- 原生js实现浏览器全屏和退出全屏
全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...
随机推荐
- Golang:接口(interface)
Go中没有class的概念.Go 语言中使用组合实现对象特性的描述.对象的内部使用结构体内嵌组合对象应该具有的特性,对外通过接口暴露能使用的特性.Go 语言的接口设计是非侵入式的,接口不知道接口被哪些 ...
- Could not load file or assembly (Exception from HRESULT: 0x80131047)-解决办法
场景:.Net 4.0 MVC WebAPI 应用程序添加ApplicationInsights监控后在demo环境运行正常,发布到testing环境出现异常 异常信息: Could not load ...
- appnium启动报错Encountered internal error running command: Error: Error occured while starting App. Original error: Permission to start activity denied.
说明写错了activity 首先查看一下activity,使用命令 打开被测app,输入命令adb shell dumpsys window | findstr mCurrentFocus 看似这个a ...
- 原来这就是 UI 设计师的门槛
本文主要分享 UI 设计师入行的一些个人经验指南,希望可以带给新入行业的设计师一点帮助! 写在前面 随着互联网的不断发展,特别是移动互联网的不断成熟,视觉设计师也进行了迭代与细分.衍生出的 UI 设计 ...
- hibernate中怎样配置两个联合属性为唯一约束(非联合主键)
Annotation中配置: @Table元素包括了一个schema和一个catalog属性,如果需要可以指定相应的值. 结合使用@UniqueConstraint注解可以定义表的唯一约束(uniqu ...
- Quartz的自定义插件
quartz本身插件: LoggingJobHistoryPlugin,LoggingTriggerHistoryPlugin分别可以打印scheduler容器管理的所有triggers和jobDet ...
- 大面积project.pbxproj冲突问题解决
在团队开发中,经常会有project.pbxproj的冲突出现. 所以我们添加过新的文件后,要及时的提交,养成好习惯.以免出问题. 但是总有一些时候忘记提交出现大面积的冲突,然后把==== <& ...
- ubuntu安装qq、微信
非让用企业微信,于是,,我屈服了 https://www.coder4.com/archives/6241 https://github.com/wszqkzqk/deepin-wine-ubuntu
- 实战操作——通过wireshark查看任意qq好友IP
今天有群里好友问我如何查看别人IP,查IP这个东西对于一些刚入门的小白来说可能是一个比较高大上的玩意,但是实际上只需一个网络协议分析工具就OK,废话不多说,下面开始实践 实验对象:任意QQ好友 操作工 ...
- Linux下好用的屏幕录像软件kazam及截图软件shutter
都是apt直接安装即可使用. 其中kazam默认保存的文件格式是avi,非常大,通常录制几十秒就已经好几个G,导致录制过程太占用资源,会出现卡顿的现象. 在“首选项”中可以选择输出格式为mp4,文件就 ...