全屏帖子的实现方法

马黑黑

可能很多人都知道F11在浏览器中的作用：全屏浏览。其实这个全屏是伪全屏，它仅仅将浏览器的顶部隐藏掉，保留滚动条（如有）且页面元素保持原样。这不是我们感兴趣的，我们要讨论的是帖子的全屏显示，在该效果之下不仅隐藏浏览器的头部，还能放大主元素到屏幕的四个边角。

我们要实现的功能，在JS里称为“全屏元素”，fullscreenElement，我们可以用它检测 document（文档）是否处于某个元素的全屏显示状态，换言之，是否拥有正在全屏显示的元素：

let fs; //声明 fs 变量用以装载页面是否处于全屏显示某个元素的状态

if(document.fullscreenElement !== null) {
        fs = true;
} else {
        fs = false;
}


上面的代码，用于检测 document 是否处于元素级别的全屏显示状态，当存在元素处于全屏显示状态，那么， document.fullscreenElement 的值指向该元素本身（如<div id=...></div>），否则，null，所以，上面代码的主要任务是检测 document 是否存在全屏显示子元素的状况，并将值传给 fs 变量。

问题是，它在什么时候进行检测，是点击按钮的时候吗？不，这将行不通：全屏下浏览器对热键的绝对保护，致使很多信息拿不到。幸运的是，JS有一个 fullscreenchange 事件，上面的代码通过对这个事件的监听就可以拿到当前 document 现在是否处于全屏显示元素状态：

let fs = false;

document.addEventListener("fullscreenchange", () => {
        if(document.fullscreenElement !== null) {
                fs = true;
        } else {
                fs = false;
        }
});


剩下的事情就好办了：可以设定一个按钮，其 id 为我们设定的（如 id="btn888")，按钮单击操作针对其（id="papa"）的父元素。上面的变量 fs 是点击该按钮的依据：

btn888.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();

其中：① exitFullscreen() 方法是基于 document 级别，它表示 document 退出全屏显示元素的状态；② requestFullscreen() 方法基于元素级别的，元素请求全屏显示，上例中，是 papa 这个元素请求进入全屏状态。

btn888 应该有按钮的字面名称，比如不是全屏时”进入全屏“、是全屏时”退出全屏“，这样才能营造友好的交互场面。这个处理机制放在对 document 的 fullscreenchange 监听事件里就好，对应 fs 的值来部署它。

一张图片，一个 div，都是可全屏显示的对象。二楼的例子是基于 div 的，它用一张图片做背景，看上去好像只是一张图片。

马黑黑

全屏观赏

马黑黑

二楼效果完整代码

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         padding: 10px;
   
5.         width: 740px;
   
6.         height: 540px;
   
7.         background: gray url('/forum.php?mod=attachment&aid=NDM4MTJ8YmI5ZTNlNTZ8MTY3MTYxNDI4OHw3MTMwfDY1NDAz&noupdate=yes') no-repeat center/cover;
   
8. }
   
9. #btn888 {
   
10.         position: absolute;
    
11.         color: white;
    
12.         opacity: .45;
    
13.         cursor: pointer;
    
14.         border: 2px solid snow;
    
15.         border-radius: 8px;
    
16.         padding: 4px;
    
17.         display: none;
    
18.         transition: all .75s;
    
19. }
    
20. #papa:hover #btn888 { display: block; }
    
21. #btn888:hover { opacity: 1; }
    
22. </style>
    
23. 
    
24. <div id="papa" style="">
    
25.         <span id="btn888">全屏观赏</span>
    
26. </div>
    
27. 
    
28. <script>
    
29. 
    
30. let fs = false;
    
31. 
    
32. btn888.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();
    
33. 
    
34. document.addEventListener("fullscreenchange", () => {
    
35.         if(document.fullscreenElement !== null) {
    
36.                 fs = true;
    
37.                 btn888.innerText = '退出全屏';
    
38.         } else {
    
39.                 fs = false;
    
40.                 btn888.innerText = '全屏观赏';
    
41.         }
    
42. });
    
43. 
    
44. </script>

复制代码

马黑黑

资源

马黑黑

二楼的效果，进入全屏后，如果按 Esc 键退出全屏，基于变量 fs 的操作逻辑不会受影响，正常运行。如果不做 fullscreenchange 监听，则很难应对 Esc 键加入后的逻辑处理。

上海朝阳

全屏呀，我是学不会，而且，我上传图片也是被限制在500宽度以下，而我恰恰是喜欢诗图模式，所以我很少在花潮发帖，一个图片缩小再缩小，屡次被限制，就放弃了。

东篱闲人

漂亮！

马黑黑

上海朝阳 发表于 2022-12-21 18:59
全屏呀，我是学不会，而且，我上传图片也是被限制在500宽度以下，而我恰恰是喜欢诗图模式，所以我很少在花 ...

可以使用长传到别处的图片，我多数情况下这么做

马黑黑

东篱闲人 发表于 2022-12-21 19:02
漂亮！

你的图根基好，可以一试

小辣椒

全屏新的尝试好像黑黑已经定版了？

东篱闲人

马黑黑 发表于 2022-12-21 19:16
你的图根基好，可以一试

这需要特大图片。才能清晰。。

马黑黑

东篱闲人 发表于 2022-12-21 20:33
这需要特大图片。才能清晰。。

也不要特大，一般像素再1200*800左右吧，放大到全屏并无多少损失

红影

JS还有“全屏元素”，真是无所不能啊

马黑黑

红影 发表于 2022-12-21 22:51
JS还有“全屏元素”，真是无所不能啊

JS为web而生，他已经 2022-1994=28 岁了，不能没啥本事吧

马黑黑

小辣椒 发表于 2022-12-21 20:32
全屏新的尝试好像黑黑已经定版了？

解决了逻辑问题。至于一些细节的安置，因人、因帖子布局而定

红影

马黑黑 发表于 2022-12-22 07:30
JS为web而生，他已经 2022-1994=28 岁了，不能没啥本事吧

正是青壮年时候呢

马黑黑

红影 发表于 2022-12-22 14:05
正是青壮年时候呢

就是。昨天看了一篇文章，说的是为什么JS会成为最受欢迎的语言。作者不解，觉得JS理论上不伦不类，却拥有那么多的使用者，并受到很多程序员的青睐。其实，JS就是因为不伦不类才受欢迎。它属于宽松类型变量的语言，变量类型不严谨，可以自由自在声明和赋值。此外，它对运行环境没有什么特别的要求，不需要运行库，有浏览器或浏览器内核就可以运行，写完就用，无需编译、打包。

红影

马黑黑 发表于 2022-12-22 17:18
就是。昨天看了一篇文章，说的是为什么JS会成为最受欢迎的语言。作者不解，觉得JS理论上不伦不类，却拥有 ...

这个学会真不错啊，特别自由的感觉。

马黑黑

红影 发表于 2022-12-22 21:09
这个学会真不错啊，特别自由的感觉。

约束少一些，挺好

红影

马黑黑 发表于 2022-12-22 21:35
约束少一些，挺好

那也要熟练掌握的人才行，我这样的，也不行啊。