JavaScript 自动全屏从寻找到放弃

如果你有某个页面希望在页面加载后自动全屏，那么请放弃吧…

如果你还不死心那么倒是可以以继续往下看看

1. 如何全屏
   你可以在MDN很容易的找到如下示例 https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
   通过 某个 按键 或者 鼠标事件 调用对应的API 进入或退出全屏

   document.addEventListener("keydown", function(e) {
     if (e.keyCode == 13) {
       toggleFullScreen();
     }
   }, false);
   
   
   function toggleFullScreen() {
     if (!document.fullscreenElement) {
         document.documentElement.requestFullscreen();
     } else {
       if (document.exitFullscreen) {
         document.exitFullscreen(); 
       }
     }
   }
   

   如果你必须考虑麻烦的兼容性问题，甚至要兼容IE那么建议你直接上 screenfull.js
   https://github.com/sindresorhus/screenfull.js

2. 既然已经可以进入全屏了，那么剩下的不就是在页面加载时调用上述API就行了么
   不出意料等待你的是 一个warning
   Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
   居然只能通过 user gesture 来调用？这API要求真是任性那。
   不过我们注册个事件然后，然后调用下不就行了么，嘿嘿，浏览器怎么知道这是代码模拟的，还是用户操作的那~
   于是就有一下类似的代码

    let el = document.getElementsByClassName("someclass")[0]
    let event = new Event('abc');
       el.addEventListener('abc', function (e) {
         toggleFullScreen();
       }, false);
       el.dispatchEvent(event);
   

啊咧咧,居然还是一样的warning...

冷静一下 JQuery的事件监听与触发好像是另外的机制，赶紧试试

      $("someclass").on("click",function () {
          toggleFullScreen();
       })
       $("someclass").trigger("click")

这真是我能怎么办，我也很绝望啊...

3.其他不同

你肯首先在想,代码模拟的事件触发和正式操作的区别在哪儿？反正这事水很深...

还有就是通过 requestFullscreen 这类API 进入的全屏 和 浏览器的全屏 实际上还是有区别。

requestFullscreen 进入的全屏 一旦刷新，或者 window.location.reload(true) 就会发现还是会露馅

伪全屏和全屏是有区别的，正如模拟的事件触发和真实的事件触发一样