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面板。一個面板里放一個矩形，命名為：全屏。另一個命名為：退出。如圖：