我们在制作某个页面时，希望特定的一部分显示全景，在图文并茂中还能嵌入一个全景，这时候可以使用iframe标签，进行ThingJS项目控制。

在使用 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()" > 返&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框架更适合开发人员使用，修改代码也很简单！