jquery Html5全屏浏览器切换按钮

whlutmcx 于 12个月前发布在 jQuery

关注(0)|答案(3)|浏览(112)

我在阅读关于HTML5全屏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>

型

jquery

来源：https://stackoverflow.com/questions/19440344/html5-fullscreen-browser-toggle-button

3条答案

按热度按时间

vc9ivgsu1#

尝试使用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();
          }
       }
     }

字符串

赞(0）回复(0）举报 12个月前

sbtkgmzw2#

Ref：：https://www.w3schools.com/howto/howto_js_fullscreen.asp

function toggleFullScreen() {
   var doc = window.document;
   var docEl = doc.documentElement;

   var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
   var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

   if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
       requestFullScreen.call(docEl);
   }
   else {
       cancelFullScreen.call(doc);
   }
}

字符串

赞(0）回复(0）举报 12个月前

zysjyyx43#

试试这个来切换全屏：

const toggleFullscreen = () => 
    document.fullscreenElement ?
        document.exitFullscreen() :
        document.querySelector('body').requestFullscreen()

字符串

赞(0）回复(0）举报 12个月前

我来回答

jquery Html5全屏浏览器切换按钮

3条答案

相关问题

热门标签

最新问答