0

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>

4

2 に答える 2

1

cancelFullscreen()、(moz の場合) mozCancelFullScreen()および (WebKit の場合) webkitCancelFullScreen()を使用してみてください 。

ここでドキュメントを読む リンクに投稿された例は、あなたの質問に答えているようです:

     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();
          }
       }
     }
于 2013-10-18T06:15:17.610 に答える