BY组态(web组态插件)嵌入原理

​

BY组态演示地 http://www.byzt.net/

首先看我们提供的插件目录结构

 

 

可以看到是纯html的，其中有两个页面，你们真正要用的就是这两个页面。

client_view.html【实时监控页面】

index_edit.html 【编辑器页面】

一个软件系统里面会有多个画面，这么多画面需要列表来呈现。列表是 【场景画面表（byzt_stage）】的增删改查，表结构在【3集成by组态前准备】，你们要先做这个列表，如下图，

 

 

 

​

在列表上

点击【实时监控】调用index_edit.html

为了和你自身的系统隔开防止css冲突，我们使用<iframe>标签来嵌入，或者 javascript的函数open()函数来调用，例子如下：

<!-- html调用 -->
<iframe src="'/static/byzt/index_edit.html?stageId='+stageId+'&token='+token"  class="editIframeZT" ></iframe>

//javascript 调用
open('/static/byzt/index_edit.html?stageId='+row.stageId+"&token="+this.token);

点击【实时监控】调用 client_view.html

 <!-- html调用 -->
 <iframe src="'/static/byzt/client_view.html?stageId='+stageId+'&token='+token"  class="editIframeZT" ></iframe>

//javascript 调用
open('/static/byzt/index_edit.html?stageId='+row.stageId+"&token="+this.token);

我们看到 调用的时候 跟了两个参数 stageId ，token 这是因为 调用之后，页面内部会根据这两个参数 去调用接口，拿到 stageId 对应的画面去呈现出来。如果对应的画面不存在，就显现空画面。

知道这个原理后，我们在做嵌入的时候就可以灵活调整

​