外部的页面和EasyV通信

📎iframe-demo (2).rar

获得大屏案例指路素材广场：https://easyv.cloud/market

解压

上述文件解压后包括：

1. iframe-demo.html

操作步骤

1. 用vscode打开该html文件所在文件夹；
2. 给vscode安装live server插件；
3. 将下图中的url地址更换为大屏的预览页面地址；

4. 在vscode中鼠标右键该html文件，选择open width live server，可以看到默认浏览器自动打开了一个页面；

5. 将打开后的页面url地址复制到大屏中iframe组件的数据中；

6. 预览后可得以下效果；

配置项要点

a. 选项卡配置：选项卡用于向iframe内部页面发送消息，需要在选项卡的自定义事件中，选择iframe组件，设置动作为EasyV向外部页面发送消息，变量名可以自己规定，参数输入框中书写js代码，return的值即为发送的消息内容。具体配置如下所示：

b. iframe的配置：iframe组件需要在交互中配置页面通信回调，案例中设置变量名为a，这里要求内部页面发送的消息为对象格式，即 { a : 1 } 这种格式，这样iframe会把对象中a的值提取出来，然后以回调的形式发送出去，再由别的组件接收这个回调。

c. 标题组件的配置：标题组件用于接收回调a，展示其相应内容。