IE11 转换 Edge全画面表示 fullscreen
IE11 可以用的fuLlscreen 到 edge是就不要用了。请问有谁知道edge在JavaScript里是怎么写全画面表示的代码的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击全屏</title>
</head>
<style>
.fullBox {
width: 600px;
height: 400px;
padding: 100px;
text-align: center;
margin: 30px auto;
background-color: pink;
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
}
.btn {
font-size: 20px;
}
</style>
<body>
<div id="box" class="fullBox">
Hello World 点击我试试
<button id="btn" class="btn" onclick="handleClick(event)">进入全屏</button>
</div>
<script>
// 监听窗口大小
window.onresize = function () {
var isFull = isFullScreen();
const btn = document.getElementById("btn");
if (isFull === false) {
btn.innerHTML = "进入全屏";
} else {
btn.innerHTML = "退出全屏";
}
};
const handleClick = (e) => {
const el = e.target;
// 检测当前是否是全屏状态
var isFull = isFullScreen();
if (isFull) {
el.innerHTML = "进入全屏";
exitFullscreen();
} else {
el.innerHTML = "退出全屏";
const box = document.getElementById("box");
handleFullScreen(box);
}
};
// 检测当前是否全屏
function isFullScreen() {
var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
return isFull;
};
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
};
// 进入全屏
function handleFullScreen(element) {
console.log(element, "element");
if (element.requestFullscreen) {
console.log(1);
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
console.log(2);
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
console.log(3);
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
console.log(4);
element.msRequestFullscreen();
}
};
</script>
</body>
</html>
代码
/*
* 全屏
*/
function fullScreen(ele){
var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;
var isFullScreen = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement;
if (fullScreenEnabled === undefined || fullScreenEnabled) {
if (isFullScreen === undefined) {
if (ele.requestFullScreen) {
ele.requestFullScreen();
} else if (ele.webkitRequestFullScreen) {
ele.webkitRequestFullScreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.msRequestFullScreen) {
ele.msRequestFullScreen();
} else {
console.log('不存在进入全屏的方法！ => undefined');
}
} else if (isFullScreen === null) {
if (ele.requestFullScreen) {
ele.requestFullScreen();
} else if (ele.webkitRequestFullScreen) {
ele.webkitRequestFullScreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.msRequestFullScreen) {
ele.msRequestFullScreen();
} else {
console.log('不存在进入全屏的方法！ => null');
}
} else {
console.log('元素已经是全屏状态了！');
return true;
}
} else {
console.log('不支持全屏模式！');
}
}
/*
* 退出全屏
*/
function exitFullScreen(){
var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;
var isFullScreen = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement;
if (fullScreenEnabled === undefined || fullScreenEnabled) {
if (isFullScreen === undefined) {
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.webkitExitFullScreen) {
document.webkitExitFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullScreen) {
document.msExitFullScreen();
} else if (document.msCancelFullScreen) {
document.msCancelFullScreen();
} else {
console.log('不存在退出全屏的方法！ => undefined');
}
} else if (isFullScreen !== null) {
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.webkitExitFullScreen) {
document.webkitExitFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullScreen) {
document.msExitFullScreen();
} else if (document.msCancelFullScreen) {
document.msCancelFullScreen();
} else {
console.log('不存在退出全屏的方法！ => null');
}
} else {
console.log('元素已经是非全屏状态了！');
return true;
}
} else {
console.log('不支持全屏模式！');
}
}
注意：
IE 中：
进入全屏： ele.msRequestFullscreen() ===> 特别注意大小写，如果有问题检查这个
退出全屏： ele.msExitRequestFullscreen()
Fullscreen API (Windows) | Microsoft Docs https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265028(v=vs.85)?redirectedfrom=MSDN
开启全屏
// 判断各种浏览器，找到正确的方法
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素
退出全屏
// 判断浏览器种类
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// 退出全屏模式!
exitFullscreen();