Since the IE browser does not support the full-screen mechanism of H5 compared with some versions, it is necessary to perform compatibility processing on the full-screen to facilitate people's use.
First we have to introduce two methods:
1. Request to enter full screen mode element.requestFullscreen()
This method is used to make an asynchronous request to put the element into full screen mode.
① If the element is allowed to enter full screen mode, the document object will receive a fullscreenchange event to notify the caller that the current element has entered full screen mode.
② If the full screen request is not permitted, a fullscreenerror event will be received.
Note: Before calling the element.requestFullscreen() method, you can listen to the fullscreenchange and fullscreenerror events
(1) fullscreenchange event
This event is fired when the browser opens or closes full screen mode.
//例如:
document.addEventListener("fullscreenchange", function( event ) {
if ( document.fullscreen ) {
//当处于全屏时,执行以下代码
console.log(document.fullscreenElement);//只读属性
//该属性返回当前处于全屏模式的DOM元素
}
});
(2) fullscreenerror event
Fired when the browser cannot switch to fullscreen mode.
//例如:
document.addEventListener("fullscreenerror", function( event ) {
alert("您的浏览器不支持全屏!");
});
From the above two events, the following two properties are obtained:
(3) document.fullscreenElement
This property returns the DOM element currently in fullscreen mode (read-only property)
(4) document.fullscreen
This property is used to return whether the document is currently in full screen (read-only property), the return value is a boolean type
return value:
1. true: the current document is in full screen mode
2. false: the current document is not in full screen mode
(5) Compatible writing for requesting full screen:
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. Cancel entering full screen mode element.cancleFullScreen()
This method is used to take the current document out of full-screen mode.
Since the browser has a stack for storing full-screen elements, after the current element exits full-screen, if there are other elements in the stack, the other elements will remain in the full-screen state.
(1) Compatible writing method to exit full screen:
//退出全屏
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. Full screen case compatible with IE browser
Ideas:
<!-- 定义一个宽高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;
}
});