务8：全屏模式的切换。

这张就是第八，第八小姐就是讲关于全屏模式的切换。回到页面，希望有个按钮，一点全屏娱乐模式，这一点就切换回来。可能我个人不太喜欢这种模式，但有的人会用，还是把它设计进去。

然后就在这个地方加一个图标，有空再找一下。找了一个图标，就找这个。jump through screen one，这有了吗？有了，还挺好。然后就稍小了一点，再给它大一点，size，就不要说是二十，可以。点它，现在没效果，来做这个效果。

首先给它定一个变量叫is war screen，是不是全屏的？它肯定是响应数据了，i e f，它不是默认，当然响应数据这边可以给它添类型，比如它是birch，填birch。如果它不是，还找一个相对的，跟它相反的按钮，收回来的按钮，就用这个。

off for screen one，就这个，给它来复制一下，把它放松，就是衣服regan in the first three，如果它真的，就显示上面的，否则就显示下面的。来看一下，这边有一个方法，就这样可以，可能还做其他的，记得就给它定一个top切换螺丝功能，它是一个，然后再调整这个方法就行了。

就要投screen，点，没效果，为啥没效果？是不是点错了？这边点这上面，再说下面一个，放到枪上，点，看有切换效果了。怎么样给它切换？这个是节食里面固定的方法，如果它的值，直接给它切换，就是document，the element，点a request，press greet plug，就是全屏切换。

这里切换了，这点没效果只按a xe，所以这边也不对，所以希望它变成这个时候就把它缩回来，这边就要做一个判断了，就是来判断它是不是已经缩放了，如果它已经是展开了，就把它缩回来，也是，这个就退出，否则就把它删远，就简单的删远，删除就可以了。

试一下，点，点，回来了，点，点，再配合原来的一点，就全屏显示了，舒服了，点回来。这一章就讲完了，就把页面布局都弄好了，包括动态生成菜单页，浏览历史页，面包穴导航，把整个布局就全做好了。

下一张开始做具体业务了，首先叫做用户的登录，注册新用户，还有一个重置密码。这节课就讲到这里，拜拜。

前遇到一个需要在浏览器全屏展示页面的效果,我们经常使用的就是requestFullscreen和exitFullscreen，来进行全屏或者退出全屏，但有时候我们可能需要获取打开全屏时的窗口权限信息，这种情况下就需要使用getScreenDetails了

代码如下

<div class="wrap">
    <div class="content">
      Setting Screen
    </div>
    <div class="btn">
      <button id="full-screen" onclick="fullScreen()">全屏</button>
      <button id="exit-full-screen" onclick="exitFullScreen()">退出全屏</button>
    </div>
  </div>
  <script>
     //获取全屏元素，可以是具体元素或者body
    const wrap = document.querySelector('.wrap')
    let primaryScreen = null
    async function fullScreen () {
      // 检测网页是否有全屏元素
      if(!document.fullscreenElement){
        console.log('/screen.html [43]--1','full-screen',document.fullscreenElement);
        try {
          if(!primaryScreen) {
            //获取可以全屏的窗口信息
            primaryScreen = (await getScreenDetails()).screens.find(
              (screen) => screen.isPrimary,
            );
          }
          console.log('/screen.html [54]--1','primaryScreen',primaryScreen);
          //将窗口信息传给requestFullscreen,窗口将弹出确认弹框
          await wrap.requestFullscreen({ screen: primaryScreen });
        } catch (err) {
          console.error(err.name, err.message);
        }
      }
      

    }

    function exitFullScreen () {
      // 检测网页是否有全屏元素
      if(document.fullscreenElement) {
        // document 退出全屏
        document.exitFullscreen()
        console.log('/screen.html [43]--1','exit-full-screen',document.fullscreenElement);
      }
    }
    

如图所示，点击允许将获取同意全屏窗口的信息

PS:

• 全屏元素，可以是具体元素或者body
• 退出全屏只能是document
• 在进行全屏或退出全屏时，最好进行document.fullscreenElement全屏元素获取
• getScreenDetails可以获取系统同意全屏的窗口信息