Display text depending on whether fullscreen is supported and whether already in fullscreen mode or not

Question

I'm very new to Javascript. I'm trying to display a text depending on whether the browser supports fullscreen and whether it is already displaying fullscreen or not. At the top of a page I added the code below. However, this doesn't seem to work. It doesn't display anything. Any idea how to to do this differently?

<script type="text/javascript">
  document.addEventListener("fullscreenchange", function (event) {
      if (document.fullscreenElement) {
          document.write("Fullscreen already activated.");

      } else {
          displayButton();
      }
  });

  function displayButton () {
      if (document.fullscreenEnabled) {
            document.write("Open Fullscreen here");
      } else {
            document.write("Fullscreen not supported.");
      }
  };
</script>

Your code will only execute if the event `fullscreenchange` is triggered. Are you calling `element.requestFullScreen()` at some point? https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen Do you have a button on HTML that toggles the fullscreen state of the document? — tehsis, Jun 05 '20 at 15:29

ROOT · Accepted Answer · 2020-06-05T18:14:32.427

You need to trigger the full screen mode by calling .documentElement.requestFullscreen() on your document, I added a button to trigger this on button click, this snippet here might not work because stackoverflow snippets are sandboxed and with limited access.

Here a working fiddle

updated answer:

I changed the code to have the button trigger the fullscreen and switch it back once the tab is in full screen mode, also you will notice that I removed document.write() (seems it causes the full screen exit event to trigger) and replaced it with a <p> tag to act as a logging placehoder for text when in the tab is in full screen or not, I added a check on document.fullscreenElement to toggle the <p> and <button> tags text one we execute displayButton() inside the event listener.

document.getElementById("full-screen").addEventListener("click", function () {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
});

document.addEventListener("fullscreenchange", function (event) {
  displayButton();
});

function displayButton() {
  if (document.fullscreenElement) {
    document.querySelector(".log").innerHTML =
      "you are in full screen! click the button to toggle back!";
    document.getElementById("full-screen").textContent = "exit full screen";
  } else {
    document.getElementById("full-screen").textContent = "full screen";
    document.querySelector(".log").innerHTML =
      "Not in full screen! press <strong>`full screen</strong> button to make the browser full screen.";
  }
}

document.querySelector(".log").innerHTML =
  "Not in full screen! press <strong>`full screen</strong> button to make the browser full screen.";

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link href="https://fonts.googleapis.com/css?family=Heebo:400,500&display=swap" rel="stylesheet" />
        <style></style>
    </head>
    <body>
      <div class="log"></div>
      <button id="full-screen">
      full screen
      </button>
    </body>
</html>

Thanks, I almost got it to work! The purpose I had in mind for paragraphs 2 and 3 of the Javascript code was to use this to remove the button if the window is in full screen (so to only display the button when not yet in full screen). How should I change this part of the code to achieve this? — Marty, Jun 05 '20 at 17:23
@Marty, I updated my answer and made some changes, I also changed the fiddle. — ROOT, Jun 05 '20 at 17:57
Thanks, I think we're almost there! Only when toggling back from full screen to not-fullscreen, then the log div still displays: "you are in full screen! click the button to toggle back!" — Marty, Jun 05 '20 at 18:10
Sorry seems I forgot to update the URL for the fiddle, here is he new one https://jsfiddle.net/mamounothman/bm6s2gz4/55/ I also added it to the answer. — ROOT, Jun 05 '20 at 18:15

score 0 · Answer 2 · answered Jun 05 '20 at 15:37

There is no full-proof way to detect browser-compatibility, but you can detect if, after clicking a fullscreen button for example, the function has worked by checking the window height against the screen height:

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

Taken from this useful stack question: Detect fullscreen mode

If you do want to check browser-compatibility, you'd have to find out which browsers support full-screen and create a custom function which first detects which browser they're using, then matches that browser against which browsers support fullscreen. i.e.

if (browser === 'Safari') {
    document.write("Open Fullscreen here")
}

Useful article on how to detect browsers: https://code-boxx.com/detect-browser-with-javascript/

Browser support for fullscreen: https://caniuse.com/#search=fullscreen

score 0 · Answer 3 · answered Jun 05 '20 at 15:38

I wrote this up for you, I think this might fit your needs:

<html>
  <body>
    <p id="fs"></p>
    <script>  
      var el = document.getElementById("fs");

      window.addEventListener("resize", function (event) {
         checkFull();
      });

      if(document.fullscreenEnabled){
        checkFull();
      }else{
        el.innerText = "Fullscreen not supported.";
      }

      function checkFull(){
        if(screen.width === window.innerWidth){
            el.innerText = "User is fullscreen!";
          }else{
            el.innerText = "Waiting for user to enter fullscreen...";
          }
      }
    </script>
  </body>
</html>

This will detect if the window is either window-fullscreen or complete fullscreen, because browsers don't provide sure-proof ways of checking yet.

Display text depending on whether fullscreen is supported and whether already in fullscreen mode or not

3 Answers3