IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。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我的项目嵌入到您本人的页面中去呢~
ThingJS是3D开发PAAS平台，能够本人写脚本进行我的项目管制，入门很简略！