所以我有这个 javascript 片段，它有两个按钮可以进入全屏，一个按钮可以退出全屏。我想做到这一点，如果我不在全屏模式下，按钮会显示转到全屏模式，而当我处于全屏模式时，按钮会显示退出全屏模式... 所以基本上我只需要一个按钮就可以进入/退出全屏。
<html>
<head>
<script>
function launchFullscreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
</script>
</head>
<body>
<button onclick="launchFullscreen(document.documentElement);">Launch Fullscreen</button>
<button onclick="cancelFullscreen();">Hide Fullscreen</button>
</body>
</html>
最佳答案
将id添加到按钮并仅切换按钮 例如:
function launchFullscreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
//hide full screen button
this.style.display ='none'
//show exit button
document.getElementById("btn_cancel_fullscreen").style.display ='inline'
}
function cancelFullscreen() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
//hide cancel full screen button
this.style.display ='none'
//show full screen button
document.getElementById("btn_fullscreen").style.display ='inline'
}
<button id='btn_fullscreen' onclick="launchFullscreen(document....)"> Fullscreen</button>
<button id='btn_cancel_fullscreen' style='display:none' onclick="cancelFullscreen();">Hide Fullscreen</button>
关于按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16494768/