我正在阅读HTML5 Fullscreen API。现在我遇到了一个代码,可以让你的浏览器全屏显示。
现在我想添加功能,在全屏和普通屏幕上进行切换。我无法完全理解代码。
按钮允许我们全屏浏览器。为什么我再次点击它可以恢复正常?
CSS
<style>
body {
margin: 0px;
background-color: brown;
}
#contento:-webkit-full-screen {
width: 100%;
height: 100%;
}
#contento:-moz-full-screen {
width: 100%;
height: 100%;
}
</style>
使用Javascript
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
HTML
<body id="contento">
Hello
<button onclick="goFullscreen('contento'); return false">
Click Me To Go Fullscreen! (For real)
</button>
尝试使用cancelFullscreen(),(对于moz)mozCancelFullScreen()和(对于WebKit)webkitCancelFullScreen()
Read documentation here链接中发布的示例似乎回答了您的问题:
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}