1

所以我有这个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>
4

2 回答 2

1

首先，您需要为按钮分配一个 ID。

<button id="fsBtn" onclick=launchFullscreen(document.documentElement)>Enter Full Screen</button>

按下按钮后，您需要在“fullscreen()”函数中更改按钮的 innerHTML 值：

document.getElementById("fsBtn").innerHTML = "Exit Full Screen";

您还可以更改按钮的 onclick 值：

document.getElementById("fsBtn").onclick = cancelFullscreen;
于 2013-05-11T07:24:39.673 回答
1

将 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>
于 2013-05-11T07:27:22.963 回答