Axure实战14:使用Axure和JavaScript获得ip地址

简介： Axure实战14:使用Axure和JavaScript获得ip地址

在本章中，你将学会使用Axure和JavaScript获得当前所在地的ip地址。

一段时间在网上发现一个很好玩的东西，Axure作为一款原型设计软件，竟然可以内置了插件可以调用JS代码。

网上因此也出现了不少使用两者相结合实现基础交互效果的案例，这里也学习并分享出来。

项目搭建

首先，创建一个新项目，命名为JS。

基础准备

这里引用的是搜狐IP地址查询接口，当然网上也有很多其他的免费的IP地址查询接口。

https://pv.sohu.com/cityjson?ie=utf-8

直接访问该网址可以看到我们当前所在地的IP地址。

接下来，我们可以通过JS代码引用它。

页面样式

拖入一个“内联框架”，命名为“内容展示区域”。

设置位置为（40，40），设置尺寸为600*40，勾选隐藏边框，设置滚动方式为“从不滚动”。

拖入一个“矩形2”组件，命名为“JS代码”。

设置位置为距离“内容展示区域”20的位置，设置大小为600*400，修改里面内容为下面的代码。

JavaScript:document.writeln("<script src=\'https://pv.sohu.com/cityjson?ie=utf-8\'></script>  ");document.writeln("<script type=\'text/javascript\’>  document.write(\'你的IP是:\'+returnCitySN[\'cip\']+\',\'+\'来自:\'+returnCitySN[\'cname\'])  </script>");document.writeln("");

document.writeln 是JavaScript向客户端写入的方法。

在代码第一行需要添加声明：javascript，然后我们写入搜狐IP地址查询接口地址，以text文本的形式写入，最后在浏览器中输出我们想要的文本组合。

交互样式

选中JS代码矩形，在“交互”工具栏中新建交互，选择“载入时”，选择“框架中打开链接”，目标选择“内容展示区域”内联框架，链接到“链接到URL或文件路径”。

点击fx打开编辑弹窗，添加局部变量LVAR1，选择“文件文字”，选择为“当前”，也就是“JS代码”。

然后在“插入变量或函数”中引用局部变量，引用方法为[[LVAR1]]。

预览效果

我们在浏览器中预览下效果。

哈哈，效果不错！

为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。

网站地址

IP地址：ricardowesley.gitee.io/js

快来动手试试吧！

原始链接：Axure实战14:使用Axure和JavaScript获得ip地址-阿里云开发者社区 (aliyun.com)