分享

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

 挠痒痒 2023-05-05 发布于四川
简介: 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)

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多