There are many ways to use the iframe tag. The main difference lies in the way the iframe tag is defined.

When using ThingJS to create a visual project for the Internet of Things, we need to use ThingJS CamBuilder to build the scene, use ThingJS online development platform to develop the scene, connect data, and publish the project. Some people directly use ThingJS to write all the Settings. Some people link directly to ThingJS projects in their own projects, and many people use iframe to embed ThingJS directly in their own projects.How is the ThingJS project embedded in our project via Iframe? In other words, how can I write a script to interact with an embedded iframe? This essay will give you a simple example of how to control ThingJS in your own project to make it interactive.

There’s a lot of code in the official ThingJS sample, so I’m going to skip over the code here:

<div width="800px"> <button style="position: absolute; top: 15px; left: 15px; width: 75px;" < p style="position: absolute; top: 45px; left: 15px; width: 75px;" Onclick = "flyToBack ()" > return & have spent &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>Copy the code

In this case, we need to pay attention to what method we’re going to call, and we need to write the method to be called after the method name parameter in MSG, and we need to write funcName and param when we receive it in ThingJS, FuncName or xxx.param are used to receive data in ThingJS. FuncName is used to receive data in ThingJS. FuncName is used to receive data in ThingJS.

Var app = new THING. The app ({url: "https://www.thingjs.com/static/models/storehouse" / / scene address}); app.on('load', function (ev) { var campus = ev.campus; // Open system level 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 = "enter" + type + (" + name + ")"; // Call callFuncInMain('upDataInfo', {info, id}); }) function callFuncInMain(funcName, data) {var message = {'funcName': funcName Data} // Send a message to the parent form (user home page) // The first parameter is the specific information content, // the second parameter is the origin of the window to receive the message, i.e. "protocol + domain + port". Can also be set to *, said don't limit the domain name, send all Windows window. The parent. PostMessage (message, '*'); } function changeLevel(id) { var obj = app.query('#' + id)[0]; if (obj) { app.level.change(obj); Function (e) {var data = e.data; function (e) {var data = e.data; var funcName = data.funcName; var param = data.param; // Call the ThingJS page method window[funcName](param); }); function test() { var car = app.query('car01')[0]; App.camera. FlyTo ({object: car, xAngle: 0, // around the object's own X axis rotation Angle yAngle: 0, // around the object's own Y axis rotation Angle radiusFactor: Complete: function () {console.log(" flight over "); // Complete: function () {console.log(" flight over "); }}); {} function test2 (obj) app. Camera. FlyTo ({position: [50.260000000000005, 35.129000000000005, 59.32699999999999], the target: [8.0, -2.0, 4.0], time: obj*1000, complete: function () {console.log(' fly over ')}}); }Copy the code

If you’re interested, try using Iframe to embed your own ThingJS projects into your own pages

Iframe is a powerful tagging language, and ThingJS is a 3D framework based on webGL that is ideal for optimizing projects in HTML.