【Axure JS】Axure引用JS案例-全屏与退出全屏（案例下载）

本教程主要讲解在Axure中如何引用JS代码，实现全屏与退出全屏的功能

预览地址：

https://www.fleede.com/axure/axureschool/JS-FullScreen/

主要操作步骤：

1、拖入一个按钮，文字改为【全屏】

2、选中按钮，新建交互动作：单击时-打开链接–链接到URL或文件路径

3、点击fx，出现编辑值弹出框

4、将设置为全屏的JS代码复制到函数区域，JS代码如下：

javascript:
function requestFullScreen(element) {
    var de = document.querySelector(element) || document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    }
}
requestFullScreen();

5、同理，按照同样的方式设置【退出全屏】按钮，退出全屏的JS代码如下：

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();

6、点击预览查看效果

默认/退出全屏效果

全屏效果

以上为主要的操作步骤，可实现全屏与退出全屏的功能，根据各自需求可自行设计不同的样式和场景

原型下载

访问密码：8397