Javascript按钮_Javascript_Html_Fullscreen

Javascript按钮

javascript html

Javascript按钮,javascript,html,fullscreen,Javascript,Html,Fullscreen,所以我有一个javascript，它有两个按钮进入全屏，一个按钮退出全屏。我想让它，如果我不是在全屏按钮说去全屏，当我在全屏按钮说退出全屏。。。所以基本上我只需要一个按钮就可以进入/退出全屏 <html> <head> <script> function launchFullscreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(el

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


功能启动全屏（元素）{
if（element.requestFullScreen）{
元素。requestFullScreen（）；
}else if（element.mozRequestFullScreen）{
元素。mozRequestFullScreen（）；
}else if（element.webkitRequestFullScreen）{
元素。webkitRequestFullScreen（）；
}
}
函数取消全屏（）{
如果（文档取消全屏）{
document.cancelFullScreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.webkitcancelfillscreen）{
document.webkitcancelfulscreen（）；
}
}
全屏发射
全屏隐藏

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

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

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

document.getElementById("fsBtn").onclick = cancelFullscreen;

将id添加到按钮，只需切换按钮例：

功能启动全屏（元素）{
if（element.requestFullScreen）{
元素。requestFullScreen（）；
}else if（element.mozRequestFullScreen）{
元素。mozRequestFullScreen（）；
}else if（element.webkitRequestFullScreen）{
元素。webkitRequestFullScreen（）；
}
//隐藏全屏按钮
this.style.display='none'
//显示退出按钮
document.getElementById（“btn\u取消\u全屏”）.style.display='inline'
}
函数取消全屏（）{
如果（文档取消全屏）{
document.cancelFullScreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.webkitcancelfillscreen）{
document.webkitcancelfulscreen（）；
}
//隐藏取消全屏按钮
this.style.display='none'
//显示全屏按钮
document.getElementById（“btn_全屏”）.style.display='inline'
}
全屏
全屏隐藏

@adamjcSweet这是有效的，但是。只有一次。有一个按钮是我想要的，它说进入全屏，当我点击它，它进入全屏，说退出全屏，当我点击它退出全屏，不会回到全屏。不过谢谢你。。。我会再做一点，但如果你知道一个快速的解决方案，请告诉我。在cancelFullscreen函数中，你会希望有类似的代码，将HTML中的按钮更改为“进入全屏”，并将onclick值分配给enterFullscreen函数。我添加了这个。。。。工作+自定义图像太多。var screenFull=false；var img=new Image（'button'）.src=“.//images/up_full.fw.png”；document.getElementById（'button'）.src=“../images/up_full.fw.png”；函数togle（）{if（screenFull）{cancelFullscreen（）；document.getElementById（'button'）.src=“../images/up_full.fw.png；screenFull=false；}否则{launchFullscreen（document.documentElement）；document.getElementById（'button'）.src=“../images/down_full.fw.png”；screenFull=true；

document.getElementById("fsBtn").onclick = cancelFullscreen;

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>