vue3、原生html交互传值

emoji1111112025-04-18 21:04

1、引入原生html

将该文件放到public目录下，在vue项目里面使用iframe 引入该文件，监听load事件(load事件在<iframe>的内容完全加载完成之后触发)

复制代码

  <iframe
      @load="onIframeLoad"
      style="width: 454px; height: 480px"
      src="../../../public/Sample/test.html"
      frameborder="0"
    ></iframe>

2、html文件操作完成后，通过postMessage向.vue文件传递信息

复制代码

//html文件的保存事件
function submitEvent()
{
	close();
    //id的值，根据自己需要获取
	window.parent.postMessage({ action: 'close', id: '01234564789'}, '*');
}

3、在vue文件里面，文件加载完成后，添加对'message'事件的监听,监听完成后，进行相应的操作

复制代码

const onIframeLoad = () => {
  window.addEventListener("message", handleMessage);
};

const handleMessage = (event) => {
  if (event.data.action == "close") {
    console.log(event.data.id)
  }
};

4、移除事件监听器

复制代码

onUnmounted(() => {
  // 组件销毁前移除事件监听器
  window.removeEventListener("message", handleMessage);
});