不到20行代码，使用iframe去嵌入你的物联网项目！

最新推荐文章于 2024-05-30 15:14:05 发布

原创

最新推荐文章于 2024-05-30 15:14:05 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用iframe将ThingJS物联网可视化项目嵌入到自己的网站中，通过简单示例展示如何进行交互控制，实现不到20行代码的高效集成。

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。这里讲一讲ThingJS 3D开发如何花式利用iframe标签？

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