重定向页面[重复]时html中的全屏问题

Question

This question already has an answer here:

• javascript - Full screen 1 answer

When I am putting below code for full screen but when I redirect another page full screen is not working .how can do this when redirect full screen is not close.My full screen code is here.

    <script type="text/javascript">

        function toggleFullScreen() {
            if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
                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();
                }
            }
        }
    </script>

please help me.

</div>

Answer 1

[Extracted from my own answer to a similar question]:

This issue happens because there are two different full screen modes:

• One applied to elements/documents that you trigger using JavaScript (the one you are using with the API). This fullscreen is lost when the page reloads or when you browse to a different page.
• Another native to the browser that is set by the user with F11 (applied to the browser itself, and not to the page/document: if you reload or browse to a different site, the browser will continue in fullscreen mode).

---

[For your particular case]:

You are using the Fullscreen API, so when you navigate to a different page the full screen is lost (because it applies to that particular document that is left behind).

One possible solution would be to have an iframe that occupies the whole size of the screen, and apply the full screen to the document that contains it. That way, the user will move within the iframe that will be in a full-screen document.

Something like this (you will need to copy this code into your own file as due to security reasons, frames are not allowed in the code snippets):

function toggleFullScreen() {
  
  // hide the button
  document.getElementById("mybutton").style.display = "none";
  
  // your content
  if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    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();
    }
  }
}

#mybutton { z-index:2; position:absolute; }
iframe { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; }

<button id="mybutton" onclick="toggleFullScreen()">Full Screen</button>
<iframe src="http://stackoverflow.com"></iframe>

</div>