编辑导语：如何利用Axure去获取页面尺寸，而且使内联框架自适应巨细呢？本文作者通过实际操纵，举办了记录总结，但愿看后对你有所辅佐。

本日要演示的对象其实很简朴，一两分钟就能做完，主要是用来补充Axure IDE提供的交互成果中的不敷，导致一些想法没步伐很好地实现。

其实海外有大神(De Jongh)做了一个能在Axure宣布框架内跑起来的Javascript拓展，这是地点：?id=interaction:axure_api&do=index。

一部门是Axure基于jQuery的函数，尚有一部门是他增补的扩展函数，扩展函数看起来很不错，办理了许多问题；可是安装实在是贫苦，出格是假如面向不熟悉代码的设计师（流程设计师、视觉设计师等）的确是天书。

为此，团结我们常用的一些成果或函数，我梳理了一些不需要拓展库就能实现的，做成例子分享给各人。

本日，我们做一个iframe内联框架按照加载页面的尺寸自适应变革巨细。Axure自带的页面属性是很简朴的，只有一个pageName，完全不足用！如图：

凡是我们做页面的时候，还会用到页面的尺寸。好比自界说视觉的转动条、通过iframe（内联框架）做的页面切换等等，假如没有页面尺寸，会导致无法实现自适应等操纵，所以本日来办理它。

这是演示地点，大概因为 *** 的原因，导致页面载入时间过长，高度值读取失败，请刷新一下：

01 筹备测试素材

我们先筹备3个页面1个全局变量：1个是带菜单的主页面，2个演示用内容页，尚有1个全局的变量。

交互流程与道理：

按钮点击触发，被加载的子页面在载入的时候，获取本身的页面高度，然后写入到全局变量，按钮行动延时改变iframe的尺寸。

02 建造页面 1. Home：主页面

主页面内我安排了2个按钮，1个iframe：2个按钮（矩形），没有定名要求；1个iframe，iframe的元件ID定名为“loadPageFrame”，配置为埋没边框、从不转动。

2. page1、page2 ：内容页面

这两个页面随便找些文字，可能画一些测试的图形，尽大概把页面高度拉长，以便等会测试的时候浮现出区别。

03 交互与代码 1. home，菜单按钮

主页面傍边按钮主要是触发iframe载入方针页面，然后延迟500ms（可按照需求调解，150ms根基也ok），按照全局变量“size”改变iframe的尺寸。

给菜单按钮添加交互，交互的序次不要错：要先把iframe缩小到10高度，然后打开链接，延迟后再设定尺寸。

2. page 1、page 2内容页

内容页可任意建造，只需要在页面中添加页面的交互，作为载入时获取本页面的高度：

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

04 扩展应用

回收延时触发，是因为跨页面的元件是无法直接交互的（IDE傍边获取不到方针指针），所以只能通过跨页面的全局变量来实现。根基上延迟200ms阁下是不被察觉的，虽然思量到终端的运行本领，可以适当耽误。

示例代码中的626w是随意配置的iframe宽度，也可按照变量修改。[[size]]就是全局变量size，可以在IDE傍边直接引用。

为了利便各人今后搜索，我用到的函数罗列一下：

$axure.setGlobalVariables[name,value]：赋值axure的全局变量，可以跨页面利用，无法通过代码建设，需要在Axure的IDE傍边先界说变量；

document.documentElement.scrollHeight：页面内容高度，一个很通例的HTML工具属性，只是在Axure IDE傍边没有被袒露，可写在 *** 代码里。