不到20行代码,使用iframe去嵌入你的物联网项目!
2020-08-06 20:09
591 查看
iframe元素会创建包含另外一个文档的内联框架(即行内框架)。这里讲一讲ThingJS 3D开发如何花式利用iframe标签?
在使用ThingJS制作物联网可视化项目时,需要使用ThingJS的CamBuilder园区搭建工具去搭建场景、使用ThingJS在线开发平台去开发场景、对接数据、发布项目,有的人是直接利用ThingJS去写所有的设置项,有的是在自己项目中通过链接直接跳转到ThingJS项目中去,更多的人则选择使用iframe的方式,直接将ThingJS嵌入到他们自己的项目中去。 ThingJS项目是如何通过Iframe嵌入到我们的项目中去的呢?或者说,我iframe嵌入后,怎么去写脚本进行交互呢?本篇随笔将写一个简单的示例告诉大家,如何在自己项目中去控制ThingJS项目,达到交互的功能。
ThingJS官方示例中有许多的功能代码,在这里就不为大家一一讲解,直接上代码:
<div width="800px"> <button style="position: absolute;top: 15px;left: 15px;width: 75px;" onclick="flyToCar()">飞到小车</button> <button style="position: absolute;top: 45px;left: 15px;width: 75px;" onclick="flyToBack()">返 回</button> <iframe id="testMsg" style="width: 600px;height: 400px;" src='https://www.thingjs.com/s/aa25e09eae2f73e6ce080d73?params=105b0f77fd24654d4eebc434e9'></iframe> </div> <script> function flyToCar() { var a = document.getElementById("testMsg"); var msg = { funcName: 'test' } a.contentWindow.postMessage(msg, "*"); } function flyToBack() { var a = document.getElementById("testMsg"); var msg = { funcName: 'test2', param: "2" } a.contentWindow.postMessage(msg, "*"); } </script>
这里面,我们要注意的是,我们要调用什么方法,就在msg中的方法名参数后面写上要被调用的方法,在ThingJS中我们接收的时候要注意这边写的是funcName和param,那么我们在ThingJS中接收数据的时候也是要通过XXX.funcName或XXX.param来接收,这个虽然是基础知识,但是也不要在这里出错哟~,话不多说,上ThingJS中的代码:
var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址 }); app.on('load', function (ev) { var campus = ev.campus; // 开启系统层级 app.level.change(campus); }); app.on(THING.EventType.LevelChange, function (ev) { var obj = ev.object; var name = obj.name; var type = obj.type; var id = obj.id; var info = "进入 " + type + " (" + name + ")"; // 调用 用户主页面的 upDateInfo 方法 callFuncInMain('upDataInfo', { info, id }); }) function callFuncInMain(funcName, data) { var message = { 'funcName': funcName // 所要调用父页面里的函数名 // 'param': data } // 向父窗体(用户主页面)发送消息 // 第一个参数是具体的信息内容, // 第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送 window.parent.postMessage(message, '*'); } function changeLevel(id) { var obj = app.query('#' + id)[0]; if (obj) { app.level.change(obj); } } // 监听用户页面传回的数据 并调用 ThingJS 页面方法 window.addEventListener('message', function (e) { var data = e.data; var funcName = data.funcName; var param = data.param; // 调用 ThingJS 页面方法 window[funcName](param); }); function test() { var car = app.query('car01')[0]; app.camera.flyTo({ object: car, xAngle: 0, // 绕物体自身X轴旋转角度 yAngle: 0, // 绕物体自身Y轴旋转角度 radiusFactor: 2, // 物体包围盒半径的倍数 time: 2 * 1000, complete: function () { console.log("飞行结束"); } }); } function test2(obj) { app.camera.flyTo({ position: [50.260000000000005,35.129000000000005,59.32699999999999], target: [8.0, -2.0, 4.0], time: obj*1000, complete: function () { console.log('飞行结束') } }); }
大家有兴趣也可以自行尝试使用Iframe的方式将您自己的ThingJS项目嵌入到您自己的页面中去呢~
不到20行代码,ThingJS官方示例教你轻松使用iframe方式嵌入3D项目!
相关文章推荐
- 使用Simian检查Java项目中冗余代码
- 使用Simian检查Java项目中冗余代码
- 使用proguard混淆java web项目代码
- 使用Simian检查Java项目中冗余代码
- Google Code项目代码托管网站上Git版本控制系统使用简明教程
- 使用库项目实现Android程序代码的复用
- 如何使用Git上传项目代码到github
- 在真实项目中使用第三方或开源代的代码,组件,中间件,框架的基本规则
- StatSVN插件使用方法总结-项目代码分析工具 工作量图表生成工具
- Linux下使用Shell脚本备份项目代码模板
- 使用简单asp分页代码(项目中)
- 使用Embed标签在AS3项目中嵌入字体
- 使用Library项目实现Android程序代码的复用
- 【Android学习笔记】如何使用Eclipse在Android项目中调用C/C++代码,及遇到的错误解决方法
- junit 测试spring-test 代码!在项目中运行测试通过,留着以后直接使用
- 嵌入页面-IE:Download的使用和iframe的使用
- CxImage的简单使用(编译-->项目设置-->代码示例(PNG透明贴图))
- StatSVN插件使用方法总结-项目代码分析工具 工作量图表生成工具
- 使用Project Linker实现多个项目中代码文件的链接
- 轻松使用JQuery的日历,一段JS代码让项目文本框调出日历