1

だから私はフルスクリーンに行くための2つのボタンとフルスクリーンを終了するための1つのボタンを持つこのjavascriptピースを持っています。フルスクリーンでない場合はボタンがフルスクリーンに移動し、フルスクリーンの場合はボタンがフルスクリーンを終了すると言うようにしたい...基本的に、フルスクリーンに入る/出るには1つのボタンしか必要ありません画面。

<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 に答える