JS實現FVS網頁框通訊

適用場景：安裝了「FineVis數據可視化」插件的使用者，可參考本文瞭解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

在使用 FVS網頁框組件 嵌入其他範本或頁面時，可能存在一些頁面之間通訊的需求。例如：

• 在網頁框內點選觸發當前 FVS 範本內的其他元件聯動。

• FVS 範本內其他元件操作後，觸發網頁框內元件接收消息並執行操作。

注：不支援行動端。

1.3 實現思路

使用自訂消息的 API 接口，透過 JavaScript 事件實現通訊。接口說明參考文檔：FVS網頁框與頁面通訊API 。

本文範例需要兩個範本，在「網頁框通訊主範本.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