在本章中，你将学会使用Axure和JavaScript实现浏览器全屏效果。
项目背景
在B端或G端产品设计中，我们常常会接触到数据分析中台页面的设计。为了更好地展示数据分析的效果及给予用户更好的体验，覆盖式全屏展示模式成为一些大屏数据分析页面或者报表的首选。
那么本章中，我们将学习如何使用Axure和JavaScript实现浏览器全屏效果。
项目搭建
首先，创建一个新项目，命名为FullScreen。
页面样式-示例页面
我们拿一个数据分析页面作为示例页面。
示例页面也比较简单。
我们加了背景颜色#F0F2F5作为底色，然后拖入了一些矩形组件，修订了矩形的圆角，让卡片视图看起来没有那么锐利。
排布好卡片视图后，接着我们使用了第三方提供的图标库渲染页面。
我们在浏览器中预览下效果，PS：数据仅作为展示效果，不含其他业务逻辑。
页面样式-全屏按钮
接下来，我们来完成全屏的操作。
全屏的操作分为两部分：全屏展开、收起全屏。当我们点击全屏的时候，页面全屏时，全屏的按钮需要变成收起按钮；而我们收起全屏时，收起按钮需要变成全屏按钮。
基于这个页面逻辑，我们使用动态面板，设置两个状态，每个状态中放置一个按钮，点击时切换到另一个状态。
交互动作-全屏
页面样式完成后，我们来实现下交互动作，这里我们需要引用到两段JavaScript代码。
/*展开全屏*/ 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);
我们来看下javascript代码。
Element.requestFullscreen()方法用于异步请求，使得Element（元素）全屏显示。
然后需要这个请求支持谷歌（webkit）、火狐浏览器（moz）、IE浏览器（ms）的内核，如果请求成功就发出异步请求实现元素全屏显示。
收起全屏的代码也差不多的逻辑。
/*收起全屏*/ 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}"); } } }; 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();
我们需要分别给展示全屏按钮、收起全屏按钮加入交互动作。
在“单击时”交互中，选择“打开链接”，选择“链接到URL或文件路径”，点击fx打开编辑弹窗，将JavaScript代码复制进去。
值得注意的一点是，一定要点击fx打开弹窗，在弹窗中复制，不然可能会因为格式排版问题造成不必要的错误。
项目预览
完成后，我们在浏览器中预览下效果。
当我们点击全屏的时候，页面全屏，并且全屏按钮变成收起，点击收起按钮，页面收起，收起按钮变成全屏。
哈哈哈，效果不错！
为了让这个项目能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
项目地址
FullScreen全屏： ricardowesley.gitee.io/fullscreen
快来动手试试吧！
