JS实现FVS网页框通信

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 应用场景

在使用 FVS网页框组件 嵌入其他模板或页面时，可能存在一些页面之间通信的需求。例如：

• 在网页框内点击触发当前 FVS 模板内的其他组件联动。

• FVS 模板内其他组件操作后，触发网页框内组件接收消息并执行操作。

注：不支持移动端。

1.3 实现思路

使用自定义消息的 API 接口，通过 JavaScript 事件实现通信。接口说明参考文档：FVS网页框与页面通信接口 。

本文示例需要两个模板，在「网页框通信主模板.fvs」中添加网页框组件，嵌入「网页框通信子模板.fvs」，并演示两个模板之间互相通信。

下面先介绍两个模板的内容设计，再讲解如何实现通信。

2.1 新建模板

首先新建两个空白模板，并保存到当前工程目录中。

1）点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义名称和尺寸。如下图所示：

2）进入新建模板后，点击右下角「保存」，将模板保存到当前工程目录中，便于后续操作。如下图所示：

2.2 设计主模板

2.2.1 准备数据

打开「网页通信主模板.fvs」，新建数据库查询，输入 SQL 查询语句：SELECT * FROM 销量 where 地区='${area}' ，设置参数默认值为「华东」。如下图所示：

2.2.2 添加组件

1）添加 文本框控件 ，设置控件名称为 area ，默认值为 华东。

2）添加柱形图组件，绑定数据如下图所示：

3）添加网页框组件，网页框路径地址选择「模板路径」，点击「选择模板」选择「网页框通信子模板.fvs」。如下图所示：

2.3 设计子模板

2.3.1 准备数据

打开「网页通信子模板.fvs」，新建数据库查询，输入 SQL 查询语句：SELECT * FROM 销量 。如下图所示：

2.3.2 添加组件

1）添加饼图组件，绑定数据如下图所示：

2）添加文本框控件，设置控件名称为 text0 。如下图所示：

以上基础模板就制作完成了。

2.4 设置通信

2.4.1 FVS页面向网页框发送消息

1）打开「网页框通信主模板.fvs」。要实现通信，需在发送消息之前指定通信的域，可以在「模板>页面加载结束事件」中对整个模板设置。

注：通信的模板需来自同一个域。

JavaScript 代码为：

duchamp.onlyCommunicateWithOrigins(["http://localhost:8075"]);  //调用API指定通信的域

步骤如下图所示：

2）在「主模板」中，给柱形图添加 JavaScript 点击事件，实现发送消息给子模板。

JavaScript 代码为：

duchamp.postMessage(product); //向网页框发送的消息为参数 product ，参数值为柱形图分类名

步骤如下图所示：

3）在「子模板」中，给文本框控件添加初始化后事件，实现接收主模板的消息，并展示对应的内容。

JavaScript 代码为：

window.addEventListener("message", function(event) { 
	duchamp.getWidgetByName("text0").setValue(event.data); 
	//event 表示事件，event.data 表示接收到的消息对象
})

步骤如下图所示：

2.4.2 网页框向FVS页面发送消息

1）在「网页框通信子模板.fvs」中，给饼图添加 JavaScript 点击事件，实现发送消息给主模板。

JavaScript 代码为：

window.parent.postMessage(area, 'http://localhost:8075');  //将 area 作为消息发送给指定的域，area 的值为饼图的系列名

如下图所示：

2）在「网页框通信主模板.fvs」中，给文本框组件添加初始化后事件，实现接收子模板的消息，并展示对应的内容。

JavaScript 代码为：

duchamp.addPostMessageListener((message) => {
//监听来自网页框的消息，并将其赋值给 area 文本框控件
 duchamp.getWidgetByName("area").setValue(message);
})

步骤如下图所示：

2.5 效果预览

分别保存好两个模板，预览主模板，效果如下图所示：

点击下载模板：

网页框通信主模板.fvs

网页框通信子模板.fvs