最近，项目中需要添加视频监控，录像功能，前端库采用了liveQing,但是项目是基于vue3开发的，出现了不兼容的问题，因此，经过研究，采用原生js,使用iframe的方式引入liveQing。

基本使用

vue3页面中通过iframe引入html，这里要注意一点，引入的html路径必须写成public下的"/XXX.html"。

<iframe
	v-if="videoInfo.iframeSrc"
	ref="iframeRef"
	allowfullscreen="true"
	webkitallowfullscreen="true"
	mozallowfullscreen="true"
	@load="loaded"
	:src="videoInfo.iframeSrc"
	style="width: 100%; height: 50vh"
	scrolling="auto"
	frameborder="0"
	id="iframe"
>
</iframe>

在onMounted生命周期内监听message，注意，必须使用onBeforeUnmount移出message。

onMounted(async () => {
	// 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
	window.addEventListener("message", handleMessage);
});

const handleMessage = event => {
	// 根据上面制定的结构来解析iframe内部发回来的数据
	const data = event.data;
	...
};

onBeforeUnmount(() => {
	window.removeEventListener("message", handleMessage);
});

iframe通讯

使用xxx.contentWindow.postMessage()传递数据

const loaded = () => {
	// iframe 加载时传递数据给子组件
	if (iframeRef.value) {
		iframeRef.value.contentWindow.postMessage(
			{
				cwd: "sendMsg",
				params: {
					name: videoInfo.cameraName,
					url: videoInfo.videoUrl,
				},
			},
			"*"
		);
	}
};

html页接收信息

// 接收src等信息
window.addEventListener('message', function (event) {
    if (event.data.cwd == "sendMsg") {
        player.setAttribute("video-url", event.data.params.url);
    }
});

html页发送信息

// 向父vue页面发送信息
function sendMsgCb(cmd, data) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    timer = setTimeout(() => {
        window.parent.postMessage({
            cmd: cmd,
            params: {
                success: true,
                data: data
            }
        }, '*')
    }, 300)
}

完！