vue3、原生html交互传值

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);
});
相关推荐
MARS_AI_5 小时前
云蝠智能 Voice Agent 落地展会邀约场景:重构会展行业的智能交互范式
人工智能·自然语言处理·重构·交互·语音识别·信息与通信
知识分享小能手9 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
我命由我1234512 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
海天胜景12 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
天天向上102413 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y14 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁14 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路14 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
AxureMost15 小时前
Axure-9高级教程:Axure函数使用手册-免费
交互·axure