編輯導(dǎo)語：如何使用Axure去獲取頁面尺寸，并且使內(nèi)聯(lián)框架自適應(yīng)大小呢？本文作者通過實(shí)際操作，進(jìn)行了記錄總結(jié)，希望看后對你有所幫助。

今天要演示的東西其實(shí)很簡單，一兩分鐘就能做完，主要是用來彌補(bǔ)Axure IDE提供的交互功能中的不足，導(dǎo)致一些想法沒辦法很好地實(shí)現(xiàn)。

其實(shí)國外有大神(De Jongh)做了一個(gè)能在Axure發(fā)布框架內(nèi)跑起來的Javascript拓展，這是地址：http://dejongh.dk/wiki/doku.php?id=interaction:axure_api&do=index。

一部分是Axure基于jQuery的函數(shù)，還有一部分是他補(bǔ)充的擴(kuò)展函數(shù)，擴(kuò)展函數(shù)看起來很不錯(cuò)，解決了很多問題；但是安裝實(shí)在是麻煩，特別是如果面向不熟悉代碼的設(shè)計(jì)師（流程設(shè)計(jì)師、視覺設(shè)計(jì)師等）簡直是天書。

為此，結(jié)合我們常用的一些功能或函數(shù)，我梳理了一些不需要拓展庫就能實(shí)現(xiàn)的，做成例子分享給大家。

今天，我們做一個(gè)iframe內(nèi)聯(lián)框架根據(jù)加載頁面的尺寸自適應(yīng)變化大小。Axure自帶的頁面屬性是很簡單的，只有一個(gè)pageName，完全不夠用！如圖：

通常我們做頁面的時(shí)候，還會(huì)用到頁面的尺寸。比如自定義視覺的滾動(dòng)條、通過iframe（內(nèi)聯(lián)框架）做的頁面切換等等，如果沒有頁面尺寸，會(huì)導(dǎo)致無法實(shí)現(xiàn)自適應(yīng)等操作，所以今天來解決它。

這是演示地址，可能因?yàn)榫W(wǎng)絡(luò)的原因，導(dǎo)致頁面載入時(shí)間過長，高度值讀取失敗，請刷新一下：https://fa35br.axshare.com/#id=5cgvid&p=home。

01?準(zhǔn)備測試素材

我們先準(zhǔn)備3個(gè)頁面1個(gè)全局變量：1個(gè)是帶菜單的主頁面，2個(gè)演示用內(nèi)容頁，還有1個(gè)全局的變量。

交互流程與原理：

按鈕點(diǎn)擊觸發(fā)，被加載的子頁面在載入的時(shí)候，獲取自己的頁面高度，然后寫入到全局變量，按鈕動(dòng)作延時(shí)改變iframe的尺寸。

02?制作頁面

1. Home：主頁面

主頁面內(nèi)我放置了2個(gè)按鈕，1個(gè)iframe：2個(gè)按鈕（矩形），沒有命名要求；1個(gè)iframe，iframe的元件ID命名為“l(fā)oadPageFrame”，設(shè)置為隱藏邊框、從不滾動(dòng)。

2. page1、page2 ：內(nèi)容頁面

這兩個(gè)頁面隨便找些文字，或者畫一些測試的圖形，盡可能把頁面高度拉長，以便等會(huì)測試的時(shí)候體現(xiàn)出區(qū)別。

03 交互與代碼

1. home，菜單按鈕

主頁面當(dāng)中按鈕主要是觸發(fā)iframe載入目標(biāo)頁面，然后延遲500ms（可根據(jù)需求調(diào)整，150ms基本也ok），根據(jù)全局變量“size”改變iframe的尺寸。

給菜單按鈕添加交互，交互的次序不要錯(cuò)：要先把iframe縮小到10高度，然后打開鏈接，延遲后再設(shè)定尺寸。

2. page 1、page 2內(nèi)容頁

內(nèi)容頁可任意制作，只需要在頁面中添加頁面的交互，作為載入時(shí)獲取本頁面的高度：

代碼如下：javascript:void($axure.setGlobalVariable”size”, document.documentElement.scrollHeight));

04 擴(kuò)展應(yīng)用

采用延時(shí)觸發(fā)，是因?yàn)榭珥撁娴脑菬o法直接交互的（IDE當(dāng)中獲取不到目標(biāo)指針），所以只能通過跨頁面的全局變量來實(shí)現(xiàn)?；旧涎舆t200ms左右是不被察覺的，當(dāng)然考慮到終端的運(yùn)行能力，可以適當(dāng)延長。

示例代碼中的626w是隨意設(shè)置的iframe寬度，也可根據(jù)變量修改。[[size]]就是全局變量size，可以在IDE當(dāng)中直接引用。

為了方便大家以后搜索，我用到的函數(shù)列舉一下：

• $axure.setGlobalVariables[name,value]：賦值axure的全局變量，可以跨頁面使用，無法通過代碼創(chuàng)建，需要在Axure的IDE當(dāng)中先定義變量；
• document.documentElement.scrollHeight：頁面內(nèi)容高度，一個(gè)很常規(guī)的HTML對象屬性，只是在Axure IDE當(dāng)中沒有被暴露，可寫在JS代碼里。

當(dāng)能獲取頁面尺寸，并通過全局變量修改iframe尺寸以做到自適應(yīng)以后，我們就可以不再依賴“Axure母版”這個(gè)有限的玩法了，菜單框架頁面做好，其他的內(nèi)容頁面可以隨意做，并且多人協(xié)作時(shí)不再出現(xiàn)已放置在頁面中的母版同步時(shí)效的問題。

并且使用瀏覽器本身的頁面滾動(dòng)條，要比iframe的滾動(dòng)條要美觀很多。

今天的文章比較干，或者說比較枯燥，本來還有一個(gè)很長的文章想要寫的，雖然例子已經(jīng)做好，主要是解決了Axure的IDE里面怎么通過JS代碼準(zhǔn)確定位到元件，以獲得更多的自由度去封裝應(yīng)用。

考慮到內(nèi)容更干所以還在醞釀怎么措辭，會(huì)盡快發(fā)布。

回到做這個(gè)系列的初衷，還是為了讓懂代碼的同事能預(yù)先用JS與原生IDE組合的方式，把一些組件預(yù)先根據(jù)團(tuán)隊(duì)的視覺交互規(guī)范封裝好，以便不懂代碼的同事可以方便并快速的使用來搭建交互原型。

關(guān)注我，下周會(huì)放出包括之前文章相關(guān)的源文件。

作者：ELement；公眾號：ElementChen

本文由 @ELement 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。