Html5全屏浏览器切换按钮

问题描述 投票:0回答:1

我正在阅读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>

javascript jquery html5
1个回答
0
投票

尝试使用cancelFullscreen(),(对于moz)mozCancelFullScreen()和(对于WebKit)webkitCancelFullScreen()

Read documentation here链接中发布的示例似乎回答了您的问题:

     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();
          }
       }
     }
© www.soinside.com 2019 - 2024. All rights reserved.