php可以抓取网页数据吗( 一个发布框架内跑起来的Javascript拓展,你值得拥有)

优采云 发布时间: 2021-10-11 14:21

  php可以抓取网页数据吗(

一个发布框架内跑起来的Javascript拓展,你值得拥有)

  

  我今天想演示的其实很简单,一两分钟就可以搞定。主要用来弥补Axure IDE提供的交互功能的不足,导致一些想法不能很好的实现。

  其实国外有个大神(De Jongh)做了一个可以在Axure发布框架中运行的Javascript扩展。这是地址::axure_api&do=index。

  一部分是Axure基于jQuery的功能,另一部分是他添加的扩展功能。扩展功能看起来很不错,解决了很多问题;但是安装真的很麻烦,尤其对于不熟悉代码的设计师(流程设计师、视觉设计师等)来说简直是天书。

  为此,我结合一些我们常用的函数或函数,整理出一些不用扩展库就可以实现的功能,并做了实例分享给大家。

  今天,我们制作了一个 iframe 内联框架,根据加载页面的大小自适应改变大小。Axure自己的页面属性很简单,只有一个pageName,不够用!如图:

  

  通常我们在制作页面的时候,也会用到页面的大小。比如自定义可视化滚动条,通过iframe(内联框架)进行页面切换等,如果没有页面大小,会导致适配等操作无法实现,所以今天就来解决。

  这是演示地址。可能由于网络原因加载页面时间过长,读取高度值失败。请刷新:

  01准备测试材料

  我们首先准备3个页面和1个全局变量:1个是带菜单的主页面,2个演示内容页面,1个全局变量。

  

  交互流程及原理:

  单击按钮时,加载的子页面在加载时获取自己的页面高度,然后将其写入全局变量。按钮操作会延迟更改 iframe 的大小。

  

  02制作页面 1. 首页:主页

  在主页面,我放置了2个按钮,1个iframe:2个按钮(矩形),没有命名要求;1 iframe,iframe 组件 ID 名为“loadPageFrame”,设置隐藏边框,永不滚动。

  

  2.页1、page2:内容页

  在这两个页面上找一些文字,或者画一些测试图形,尽量拉伸页面的高度,这样在测试的时候就会体现出差异。

  03 交互和代码 1. 主页,菜单按钮

  主页面按钮主要触发iframe加载目标页面,然后延迟500ms(根据需要可调,150ms基本就可以了),根据全局变量“size”改变iframe的大小。

  给菜单按钮添加交互,交互顺序不要错:先将iframe缩小到10的高度,然后打开链接,延迟后设置大小。

  

  2.页面1、页面2内容页面

  内容页面可以任意制作,只需要在页面中添加页面的交互即可获取页面加载时的高度:

  

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

  04 扩展应用

  使用延迟触发是因为跨页面组件不能直接交互(在IDE中无法获取目标指针),所以只能通过跨页面全局变量来实现。基本上200ms左右的延迟是不明显的。当然,考虑到终端的运营能力,可以适当扩展。

  示例代码中的626w是可以任意设置的iframe的宽度,也可以根据变量进行修改。[[size]] 为全局变量大小,可在IDE中直接引用。

  为了以后方便大家搜索,我把我用到的功能罗列出来:

  当可以获取页面大小,通过全局变量修改iframe大小实现自适应时,我们就不能再依赖《Axure Master》有限的玩法了。菜单框页面准备好了,其他内容页面就可以随意做,并且不再存在多人协作时已经放置在页面上的大师同步及时性的问题。

  并且使用浏览器本身的滚动条比使用iframe的滚动条漂亮很多。

  今天的文章比较枯燥,或者说比较无聊,本来有很长的文章我想写,虽然例子已经做了,但主要是解决如何在Axure IDE中传递JS代码准确定位组件以获得更多的自由来打包应用程序。

  考虑到内容比较枯燥,措辞还在考虑中,会尽快发布。

  回到做这个系列的初衷,就是让懂代码的同事提前结合JS和原生IDE,根据团队的可视化交互规范提前封装一些组件,让不懂代码的同事代码可以轻松快速地用于构建交互式原型。

  关注我,下周会放出包括之前文章在内的源文件。

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线