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);
});
相关推荐
杨超越luckly几秒前
HTML应用指南:利用GET请求获取全国山姆门店位置信息
信息可视化·数据分析·html·argis·门店
白白李媛媛几秒前
vue3中实现echarts打印功能
前端·vue.js·echarts
尘心cx2 分钟前
前端-HTML-day2
前端·html
徐小夕4 分钟前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
程十六5 分钟前
工匠指南:从 Vue 3 源码中学习高质量代码的艺术
javascript·vue.js
cccyi78 分钟前
vue前置知识-end
前端·javascript·vue.js
Kyln.Wu26 分钟前
【python实用小脚本-131】Python 实现 HTML 到 PDF 转换:解决文档处理痛点的高效工具
python·pdf·html
江城开朗的豌豆1 小时前
Vue路由钩子全攻略:让你的页面跳转更丝滑!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的data去哪儿了?生命周期寻宝记
前端·javascript·vue.js
萌萌哒草头将军2 小时前
🔥🔥🔥 NuxtLabs 宣布加入了 Vercel !
前端·javascript·vue.js