用iFrame方式集成山海鲸

将山海鲸的页面用 iFrame 的形式集成到其他页面中后,目前支持通过发送 postMessage 方式大屏播放时修改组件的设置项和触发组件的交互(注意:此时修改的设置项并不会保存,只会影响当前画面效果,项目重启之后这些改动就会丢失)。可以实现外部控制山海鲸大屏的功能。具体操作如下所示:
一. 修改组件设置项
需要修改某个组件的设置项时,首先选中一个组件,对需要修改的设置项进行双击,如图:在“文本”处双击,提示复制信息成功(注意:此时复制的是该设置项当前的值)。此时 Ctrl+v 会得到一组 json 数据
图片3.png
在得到 json 后,添加一个 type 属性,设置值为 saveOption,发送 postMessage 即可。具体代码如下图所示:
图片4.png

二. 触发组件交互事件
选中一个组件,对需要触发的交互进行双击,如图:在“鼠标点击时”处双击,提示复制信息成功。此时 Ctrl+v 会得到一组 json 数据

图片5.png
在得到 json 后,添加一个 type 属性,设置值为 triggerInteract,发送 postMessage 即可。
图片6.png
完整的测试代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>

<!-- 此处iframe的src填入项目的分享地址 -->
<iframe id="your-iframe" width=1600 height=900 src="http://192.168.31.131/LWKnXzW3av2HyxkE/" frameborder=0 allowfullscreen=true></iframe>

<div class="button-box">
<button>按钮1</button>
<!-- <button>按钮2</button> -->
</div>

<script>
window.onload = function() {
let iframe = document.getElementById('your-iframe');

var button_box = document.getElementsByClassName("button-box")[0]
button_box.addEventListener('click', function (e) {
e.preventDefault();
let text = e.target.textContent;
//ctrl+v 将复制出来的json在此替换;
let json = {
"trigger": "click",
"conditions": {},
"boardId": "87da9c52-ef47-4810-a02c-5ffec793d648",
"widgetId": "2d2698e5-b031-475d-a845-c41c69d10407"
}
json = Object.assign(json, {type:"triggerInteract"})
iframe.contentWindow.postMessage(json, "*");
});
}
</script>
</body>
</html>