如何只使用Javascript/JQuery代码进入全屏模式?目标是进入全屏模式,就像在浏览器中按F11,然后以编程方式进入.
Din*_*esh 42
您可以使用没有jQuery的vanilla JavaScript激活全屏模式.
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Test</title>
</head>
<body id="body">
<h1>test</h1>
<script>
var elem = document.getElementById("body");
elem.onclick = function() {
req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
req.call(elem);
}
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
有一点需要注意,您只能在用户执行操作(例如点击)时请求全屏模式.没有用户操作[1](例如页面加载),您无法请求全屏模式.
这是一个用于切换全屏模式的跨浏览器功能(从MDN获得):
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
73082 次 |
最近记录: |