https里面 iframe 引用http的地址 无效_谷歌优化iframe功能，ThingJS在线开发更简单...

Chrome现已支持延迟加载网页中的iframe元素，利用ThingJS进行3D开发有什么好处呢？

在使用ThingJS制作物联网可视化项目时，需要使用ThingJS的CamBuilder园区搭建工具去搭建场景、使用ThingJS在线开发平台去开发场景、对接数据、发布项目，有的人是直接利用ThingJS去写所有的设置项，有的是在自己项目中通过链接直接跳转到ThingJS项目中去，更多的人则选择使用iframe的方式，直接将ThingJS嵌入到他们自己的项目中去。

ThingJS项目是如何通过Iframe嵌入到我们的项目中去的呢？或者说，我iframe嵌入后，怎么去写脚本进行交互呢？本篇随笔将写一个简单的示例告诉大家，如何在自己项目中去控制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()">返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回</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开发，任何新功能都会增强我们的开发能力，快去试试iframe元素吧。