#头条创作挑战赛#

本文同步本人掘金平台的文章：https://juejin.cn/post/7135830434528624654

今天，我们来探讨的问题是：

当点击图片的时候，我们需要其全屏展示，当我们再次点击的时候，图片退出全屏播放。

PS: 我们退出全屏播放的情况一般是按 esc 退出。图片可以延伸到任何的 DOM 节点

在文末，我会将问题升级，留一个题目给读者思考

图片全屏，这个跟文章全屏的效果一样，比如下面的文章全屏：

就是一个元素铺平整个屏幕

思路

那么，问题我们知道了。解决问题的思路是怎么样的呢？

1. 我们获取到图片元素的 DOM 节点
2. 我们调用全屏的函数进行全屏展示
3. 浏览器监听点击事件，当图片是全屏的状态，再次点击图片的时候，调用函数退出全屏

好了，思路有了，我们来实现下。

具体实现

假设我们有 html 代码如下：

<img id="image" src="path/to/image.postfix" alt="img" />
复制代码

现在我们编写下 javascript 代码。

// 退出全屏
ngAfterViewInit() {
  const image = document.getElementById('image');
  image.addEventListener('click', (event: any) => {
    if(document.fullscreenElement === image) {
      document.exitFullscreen();
    }
    event.preventDefault();
  })
}

// 全屏查看
public fullscreenView(): void {
  const image = document.getElementById('image');
  image.requestFullscreen()
} 
复制代码

这里我用了 typescript 来编写

当然，上面的代码并没有考虑相关的兼容性。

requestFullscreen 和 exitFullscreen 方法对现代的浏览器支持还是很可以的，在 PC 端上展示毫无压力。

但是，我们还是得对代码进行浏览器兼容写法：

这里我新建了个 utils.ts 的文件：

export class Utils {

  public static gotoFullscreen(dom: any): void {
    if (dom.requestFullscreen) {
      dom.requestFullscreen()
    } else if (dom.mozRequestFullScreen) {
      dom.mozRequestFullScreen()
    } else if (dom.webkitRequestFullscreen) {
      dom.webkitRequestFullscreen()
    } else if (dom.msRequestFullscreen) {
      dom.msRequestFullscreen()
    } else {
      console.error('当前浏览器不支持部分全屏！')
    }
  }

  public static exitFullscreen(dom: any): void {
    if (dom.exitFullscreen) {
      dom.exitFullscreen()
    } else if (dom.webkitExitFullscreen) {
      dom.webkitExitFullscreen()
    } else if (dom.msExitFullscreen) {
      dom.msExitFullscreen()
    }
  }
}
复制代码

上面两个方法都是静态方法，调用方式 类名.静态方法，比如：Utils.gotoFullscreen(dom)。

问题升级

单点击图片，我们需要其全屏展示。然后设置全屏时候，右上角有一个退出的按钮。点击退出按钮，退出全屏展示。

感兴趣的读者可以先自己尝试下。

这里我给出简单的思路，可以作为参考。

答案（点击展开）

1. 设定布局，将一个 div 包裹图片
2. 在 div 中设置一个按钮的元素 button，并对 button 进行 css 布局
3. 在图片全屏的时候，显示 button，并对 button 进行按钮事件（调用退出全屏的函数）
复制代码

你学废了？

如果读者觉得文章还可以，不防一键三连：关注➕点赞➕收藏

我们设计使用大屏模板或大屏报表时，都会需要浏览器全屏展示预览的需求，通常我们都需要通过键盘F11来切换浏览器全屏效果。但是，也发现了一个问题就是我们面对的很多客户，他们并不懂F11可以全屏，给产品设计沟通带来了不便。那有没有什么方式可以直接通过鼠标点击按钮来切换全屏。答案是肯定有的，今天符号作者教大家如何利用前端的JS代码来实现浏览器全屏效果。

注意：

在看教程之前，请行了解一下，什么时javascirpt，JavaScript入门教程自行百度。当然，今天的案例RP也会免费提供给大家下载学习，也欢迎应用到更多的产品实践中去

JavaScript介绍：

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

先预览一下效果：

在线演示地址：Untitled Document

JS代码准备：

1、全屏代码：

javascript：
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || 
element.webkitRequestFullScreen ||
element.mozRequestFullScreen || 
element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { 
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
requestFullScreen(document.documentElement);

2、退出全屏代码：

javascript：
function exitFull() { 
var exitMethod = document.exitFullscreen || 
document.mozCancelFullScreen || 
document.webkitExitFullscreen || 
document.webkitExitFullscreen; 
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
exitFull();

Axure添加JS代码：

最早有发过一篇《Axure生成预览地址如何能查看到被浏览次数 | 人人都是产品经理》，有教过大家，Axure怎么添加JS外部代码，不懂的可以在回去看看。

步骤一：

打开Axure，拉取一个动态面板，创建2个State面板。一个面板里放一个矩形，命名为：全屏。另一个命名为：退出。如图：

步骤二：全屏交互制作

打开Axure，进入-全屏面板，点击添加鼠标点击事件，打开-当前链接-fx。

将前面准备好的全屏JS代码复制到FX里保存即可。要注意的是开头必须要加。javascript：

设置面板切换效果，如图，当点击时面板切换为退出面板。

步骤三：退出交互制作

打开Axure，进入-退出面板，点击添加鼠标点击事件，打开-当前链接-fx。

同样的将前面准备好的退出全屏JS代码复制到FX里保存即可。通样要注意的是开头必须要加。javascript：

至此，保存文件F5预览试试吧。教程相关文件下载：Axure页面全屏效果 - 产品大牛网