axure浏览器插件安装（axure实例教程）

在我们设计使用大屏模板或大屏报表时，都会需要浏览器全屏展示预览的需求，通常我们都需要通过键盘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预览试试吧。