Specific methods for JS to realize full screen display

In response to a small demand of the company recently , Need to put a html Full screen control of the page , It's simple, but I've never done it before , Let's practice today , The specific operation methods are recorded below .

html page

 <div class="btns">
    <button type="button" id="exitBtn" class="btn" onClick="exitFullscreen()"> Exit full screen </button>
    <button type="button" id="btn" class="btn" onClick="fullScreen()"> Full screen </button>  
  </div>
  /** Other content codes **/

To achieve full screen function code ：

function fullScreen() {
    var de = document.documentElement;
      if (de.requestFullscreen) {
          de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
          de.webkitRequestFullScreen();
      }
  }

Exit the full screen function code ：

function exitFullscreen() {
  if(document.exitFullscreen) {
       document.exitFullscreen();
   } else if(document.mozCancelFullScreen) {
       document.mozCancelFullScreen();
   } else if(document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
   }
 }

There is one caveat ： When in js Use in click An error will be reported when calling an event ,（ I use Firefox ）

$("#btn").click(fullScreen()) //  Note that errors will be reported 

After checking the information, we found that , Because... Is not called internally from a user generated event handler that is running briefly Element.mozRequestFullScreen（）, So reject the full screen request . This is a security setting , So in a normal browser environment （ End user computers ） Is the right behavior . The solution can use a callback function to call a full screen function .

perhaps , You must be in Firefox etc. onClick Event calls this function .

 <button type="button" id="btn" class="btn" onClick="fullScreen()"> Full screen </button>  

Here we are , The basic full screen function is realized .