Axure 教程,如何在 Axure 中使用 JavaScript 实现浏览器全屏模式?
时间:2022-12-27 20:26:35
欢迎观看 Axure 教程,小编带大家学习 Axure 的基本工具和使用技巧,了解如何在 Axure 中使用 JavaScript 实现浏览器全屏模式。
在设计大屏模板时,需要使用浏览器全屏模式来展示模板。通常需要通过键盘上的F11来切换浏览器全屏模式。 但是,很多用户并不理解通过F11可以实现全面屏,给产品设计沟通带来不便。
现在让我们学习如何使用 JavaScript 实现浏览器全屏模式。
什么是 JavaScript?
JavaScript 是一种脚本语言。 通常浏览器使用它来实现交互效果。 在 Axure 生成的 HTML 原型中,交互效果是通过 JavaScript 代码实现的。 Axure 还提供了引用 JavaScript 代码的方法。
小部件设置
1. 设计一张卡片并将其创建为动态面板,然后固定到浏览器,中心和中间。
2.使用按钮链接创建一个动态面板并将其命名为「进入/退出全屏模式」。状态 1 的按钮文本是进入全屏模式, 状态 2 的按钮文本是退出全屏模式。
点击「进入/退出全屏模式」动态面板状态1的进入全屏模式按钮设置点击,「打开链接」-「链接到外部URL」-在「fx输入」中输入以下代码:
javascript: 函数 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的「退出全屏模式」按钮设置点击事件,「打开链接」-「链接到外部URL」-在「fx输入」中输入以下代码:
javascript: 函数 exitFull() { var exitMethod = document.exitFullscreen || 文档.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}"); } } }; 退出全();
这样就完成了所有的设置。
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
如何快速更新体验苹果iOS11Beta1?
![](https://img.aspxhome.com/file/2023/2/a200582_0s.jpg)
excel工作簿拆分实现VBA代码
iOS 14 正式版上线时间公布,官方上线全新介绍
![](https://img.aspxhome.com/file/2023/1/a194911_0s.jpg)
如何解决win10系统的日志文件过大的问题?
![](https://img.aspxhome.com/file/2023/7/46897_0s.jpg)
Win10笔记本电脑怎么连接WiFi?
![](https://img.aspxhome.com/file/2023/4/52534_0s.png)
wps表格如何使用条件格式
如何使用DAVERAGE函数计算Excel表格中满足条件的平均值
![](https://img.aspxhome.com/file/2023/5/a156775_0s.jpg)
excel怎么让单元格填满某个字符 excel让单元格填满某个字符方法
![](https://img.aspxhome.com/file/2023/7/39697_0s.jpg)
Excel使用COUNT函数统计满足条件的数量
在WPS演示中如何利用创建播放器方式插入flash
![](https://img.aspxhome.com/file/2023/2/a167172_0s.jpg)
Excel中打字是竖着排列的如何变成横的
![](https://img.aspxhome.com/file/2023/2/a153702_0s.png)
论文wps或word中同样的单倍行距效果不一样方法介绍
![](https://img.aspxhome.com/file/2023/8/a166888_0s.png)
wps文字如何加水印图文教程
Word 15变身阅读器:增书签且兼容PDF
![](https://img.aspxhome.com/file/2023/2/21922_0s.jpg)
如何在Excel2016表格中快速自动填充一列
如何在Microsoft Excel中插入超链接
![](https://img.aspxhome.com/file/2023/0/a153070_0s.jpg)
excel表格记忆输入功能的使用教程
用Excel2003做九九乘法表的方法
![](https://img.aspxhome.com/file/2023/0/38000_0s.jpg)
wps如何将图片设置页面背景
Excel ODD 函数介绍及实例教程
![](https://img.aspxhome.com/file/2023/3/a161693_0s.jpg)