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,有大神有其他想法,多交流。
欢迎大家加我qq:309620263探讨技术问题。