由于IE浏览器较某些版本不支持H5的全屏机制,因此需要对全屏做兼容处理,以方便人们的使用。
首先我们要介绍两个方法:
1. 请求进入全屏模式 element.requestFullscreen()
该方法用于发出异步请求使元素进入全屏模式。
① 如果元素被允许进入全屏幕模式,document对象会收到一个fullscreenchange事件,通知调用者当前元素已经进入全屏模式。
② 如果全屏请求不被许可,则会收到一个fullscreenerror事件。
注意: 在调用element.requestFullscreen()方法之前,可以对fullscreenchange 和 fullscreenerror事件进性监听
(1) fullscreenchange事件
该事件在浏览器开启或关闭全屏模式时触发。
//例如:
document.addEventListener("fullscreenchange", function( event ) {
if ( document.fullscreen ) {
//当处于全屏时,执行以下代码
console.log(document.fullscreenElement);//只读属性
//该属性返回当前处于全屏模式的DOM元素
}
});
(2) fullscreenerror事件
当浏览器不能切换全屏模式时触发。
//例如:
document.addEventListener("fullscreenerror", function( event ) {
alert("您的浏览器不支持全屏!");
});
由上两个事件,得到下述两个属性:
(3) document.fullscreenElement
该属性返回当前处于全屏模式的DOM元素(只读属性)
(4) document.fullscreen
该属性用来返回该文档当前是否处于全屏(只读属性),返回值为布尔类型
扫描二维码关注公众号,回复: 156664 查看本文章
返回值:
1. true: 当前文档处于全屏模式下
2. false: 当前文档不处于全屏模式下
(5) 请求全屏的兼容写法:
function reqFullScreen(element) {
var de = element;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();//火狐浏览器的请求全屏
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();//谷歌、Safari浏览器的请求全屏
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();//IE浏览器的请求全屏
} else {
console.log("进入全屏失败")
}
}
2. 取消进入全屏模式 element.cancleFullScreen()
该方法用于让当前文档退出全屏模式。
由于浏览器内部有一个用于存放全屏元素的堆栈,因此,在当前元素退出全屏后,若堆栈内还有其他元素,那么其他元素仍将处于全屏状态。
(1) 退出全屏的兼容写法:
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
3. 兼容IE浏览器的全屏案例
思路:
<!-- 定义一个宽高200像素,背景色为粉色的盒子,并为它绑定双击事件-->
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
//用来存储box盒子的原始宽高,在退出全屏时使用
var width = "";
var height = "";
//为box设置全屏
var box = document.querySelector(".box");
//绑定双击事件,实现全屏
box.ondblclick = function () {
reqFullScreen(box);
}
//进入全屏(兼容写法)
function reqFullScreen(element) {
var de = element;
if (de.requestFullscreen) {
de.requestFullscreen();
remoceWH(de);
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
remoceWH(de);
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
remoceWH(de);
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
doc = de;
remoceWH(de);
} else {
console.log("进入全屏失败")
}
}
//定义一个用来保存原始宽高,并将宽高属性删除的方法
function remoceWH(element) {
//保存原始的宽高
width = element.getAttribute("width");
height = element.getAttribute("height");
//移除object元素的宽高
element.removeAttribute("width");
element.removeAttribute("height");
}
//退出全屏(兼容写法)
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
//退出全屏时,将原来保存的宽高,给回box盒子,恢复原来的大小
setWH();
}
//设置元素的宽高属性值
function setWH() {
$("object[name='playOcx']").each(function () {
$(this).attr("width", width);
$(this).attr("height", height);
});
}
//监听enter事件,退出全屏
$(document).keyup(function (event) {
switch (event.keyCode) {
//13 为enter键的keyCode值,当监听到enter键的触发,立即退出全屏。
//该按键不为固定,可以随意更换: 如 27 esc键
case 13:
exitFullscreen();
break;
}
});